如何在 html 中使用 jQuery 正確顯示下拉菜單
[英]How can I use jQuery in html to display the drop down menu correctly
問題描述
嗨，我是 jQuery 的新手，我正在嘗試將它實現為 HTML 代碼，但它不起作用
它在這里工作https://jsfiddle.net/6trb0whz/
但它在這里不起作用有人可以幫我解決這個問題嗎
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="App"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
</script>
<input type="radio" name="test" value="Orange" /> Burger Garage
<input type="radio" name="test" value="Burger" /> Hardee's
<input type="radio" name="test" checked="checked" value="Apple" /> Burger Factory & More
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Apple_Style_1">Turbo Chicken</option>
<option Value="Apple_Style_2">Twin Turbo Chicken</option>
<option Value="Apple_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Orange_Style_1">Original Burger</option>
<option Value="Orange_Style_2">Twin Turbo Chicken</option>
<option Value="Orange_Style_3">Shuwa Burger</option>
</select>
</body>
</html>
更新它現在工作一次然后在點擊第三個單選按鈕后消失
你可以在這里試試https://jsfiddle.net/ujvr082w/
這是代碼
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="radio" name="test" value="Orange" /> Burger Garage
<input type="radio" name="test" value="Burger" /> Hardee's
<input type="radio" name="test" checked="checked" value="Apple" /> Burger Factory & More
<br>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="App"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();});
</script>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Apple_Style_1">Turbo Chicken</option>
<option Value="Apple_Style_2">Twin Turbo Chicken</option>
<option Value="Apple_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Orange_Style_1">Original Burger</option>
<option Value="Orange_Style_2">Twin Turbo Chicken</option>
<option Value="Orange_Style_3">Shuwa Burger</option>
</select>
</body>
</html>
1 個解決方案
解決方案1
1 已采納 2019-11-25 06:16:25
<!DOCTYPE html> <html> <head> </head> <body> <label><input type="radio" name="test" value="Orange" /> Burger Garage</label> <label><input type="radio" name="test" value="Burger" /> Hardee's</label> <label> <input type="radio" name="test" checked="checked" value="Apple" /> Burger Factory & More</label> <br> <select ID="DropDownList2" Height="18px" Width="187px"> <option Value="Apple_Style_1">Turbo Chicken</option> <option Value="Apple_Style_2">Twin Turbo Chicken</option> <option Value="Apple_Style_3">Garage Burger</option> <option Value="Burger_Style_1">Chicken Fille</option> <option Value="Burger_Style_2">Grilled Chicken Fillet</option> <option Value="Burger_Style_3">Jalapeno Chicken</option> <option Value="Orange_Style_1">Original Burger</option> <option Value="Orange_Style_2">Twin Turbo Chicken</option> <option Value="Orange_Style_3">Shuwa Burger</option> </select> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script> var options = $("#DropDownList2").html(); $('#DropDownList2 :not([value^="App"])').remove(); $('input:radio').change(function(e) { var text = $(this).val(); $("#DropDownList2").html(options); $('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();}); </script> </body> </html>
您可以在創建 html 后放置腳本。 如果你把 html 放在下拉菜單中，它會在下拉菜單中獲取所有值。
解決方案2
0 2019-11-24 23:23:10
一個問題可能是您沒有在</select>和<body>之前關閉<script>標簽。
要關閉
<script>標記，請使用</script>
另一個問題可能是您忘記刪除<! - - <! - - （在兩個中間腳本之間）。
另外，也可以是結尾的<br />標簽！
希望這解決了您的問題！
顯示html下拉菜單時如何使用javascript或jquery獲取鍵盤輸入？
[英]How to use javascript or jquery to get keyboard input when html drop down menu is show?
我如何從一個 <li> 下拉菜單是php用JavaScript還是jquery生成了第二個li菜單？
[英]How can I generate from a <li> drop down menu that is php generated a second li menu with javascript or jquery?
如何基於從下拉菜單中選擇的選項以HTML顯示文本？
[英]How do I display Text in HTML based on an option selected from a Drop-Down Menu?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.