用于从下拉列表选项中搜索表格的 Javascript 函数

Question

我有一个混合了“简单”、“中等”和“困难”的问题表。我希望用户能够从下拉列表中选择的内容中按难度和主题进行搜索。这是我的下拉搜索代码：<div class="search">  <label for="dflag"> Difficulty: </label>  <select id="dflag" name="dflag">      <option value="">Select</option>      <option value="0">Easy</option>      <option value="1">Medium</option>      <option value="2">Hard</option>      </select></div><div class="search">  <label for="tflag"> Topic: </label>  <select id="tflag" name="tflag">        <option value="">Select</option>        <option value="A">Arrays</option>        <option value="S">Strings</option>        <option value="C">Conditionals</option>        <option value="L">Loops</option>       </select></div>`<button type="submit" onclick="select()"> Submit </button>`我是 javascript 新手，所以这是我到目前为止所尝试过的：<script>  function select(){  var input = document.getElementById('dflag').value;  var filter = input.value;  table = document.getElementById("question_table");  if dflag.value == 'Easy' {    display.getElementsByClassName('easy');  }  else if dflag.value== 'Medium' {    display.getElementsByClassName('medium');  }  else {    display.getElementsByClassName('hard');  }}</script>我不能使用任何库，所以没有jquery。有什么想法吗？

Answer 1

你应该给出简单、中等、困难的值，然后用它的值过滤

 function select(){

  var input = document.getElementById('dflag').value;

    document.querySelectorAll('tr').forEach(element=>{

      element.style.display = "table-row";

    })

 

    document.querySelectorAll('tr:not(.'+input+')').forEach(element=>{

      element .style.display = "none";

    })

}

<div class="search">

  <label for="dflag"> Difficulty: </label>

  <select id="dflag" name="dflag"onchange="select()">

      <option value="">Select</option>

      <option value="easy">Easy</option>

      <option value="medium">Medium</option>

      <option value="hard">Hard</option>

      </select>

</div>

<div class="search">

  <label for="tflag"> Topic: </label>

  <select id="tflag" name="tflag">

        <option value="">Select</option>

        <option value="A">Arrays</option>

        <option value="S">Strings</option>

        <option value="C">Conditionals</option>

        <option value="L">Loops</option>

       </select>

</div>`<button type="submit" onclick="select()"> Submit </button>`

<div class="input-group mb-3">

      <form>

        <table class="uk-table" id="question_table">

    <tr class="header">

        <th>Topic</th>

        <th>Difficulty</th>

        <th>Name</th>

        <th>Question</th>

    </tr>

    <tr class="medium">

        <td>Strings</td>

        <td>Medium</td>

        <td>Not</td>

        <td >Write a function named not_string that takes argument str and adds 'not' to the front of the given string, unless the string already begins with 'not' then return the string unchanged.</td>

    </tr>

    <tr class="easy">

        <td>Conditionals</td>

        <td>Easy</td>

        <td>hello</td>

        <td >Write a function named hello_there that takes parameters a_hello and b_hello that returns true if both a and b are saying hello or if neither of them are. Print false otherwise.</td>

    </tr>

    <tr  class="easy">

      <td>Functions</td>

      <td>Easy</td>

      <td>sum</td>

      <td>Write a function named sum that takes arguments x,y and returns the sum of two numbers.</td>

    </tr>

    <tr class="medium">

      <td>Loops</td>

      <td>Medium</td>

      <td>count</td>

      <td>Write a function named count that takes two arguments sequence and item that returns the number of times the item occurs in the list.</td>

    </tr>

    <tr class="easy">

      <td>Functions</td>

      <td>Easy</td>

      <td>mult</td>

      <td>Write a function named mult that takes parameters a,b,c and returns the product of those three numbers.</td>

    </tr>

    <tr class="hard">

      <td>Strings</td>

      <td>Hard</td>

      <td>appendMiddle</td>

      <td>Write a function named appendMiddle that takes arguments s1 and s2 and creates a new string by appending s2 in the middle of s1.</td>

    </tr>

    <tr class="hard">

      <td>Strings</td>

      <td>Hard</td>

      <td>findAll</td>

      <td>Write a function named findAll that takes an input string as its argument and counts all lowercase,uppercase,digits,and special symbols.Then prints the counts.</td>

    </tr>

    <tr class="hard">

      <td>Loops</td>

      <td>Hard</td>

      <td>digit_sum</td>

      <td>Write a function called digit_sum that takes a positive integer n as input and returns the sum of all that number's digits.</td>

    </tr>

    <tr class="hard">

      <td>Loops</td>

      <td>Hard</td>

      <td>factorial</td>

      <td>Write a function named factorial that takes a non-negative integer x that can multiply all the integers from 1 through x.</td>

    </tr>

</table>