我有一個混合了“簡單”、“中等”和“困難”的問題表。我希望用戶能夠從下拉列表中選擇的內容中按難度和主題進行搜索。這是我的下拉搜索代碼：<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。有什么想法嗎？
1 回答
慕尼黑8549860
TA貢獻1818條經驗 獲得超11個贊
你應該給出簡單、中等、困難的值，然后用它的值過濾
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>
- 1 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消