如何在 html 中使用 jQuery 正确显示下拉菜单
[英]How can I use jQuery in html to display the drop down menu correctly
问题描述
hi I am new to jQuery and I am trying to implement it to an HTML code but it doesn't work
嗨，我是 jQuery 的新手，我正在尝试将它实现为 HTML 代码，但它不起作用
it works here https://jsfiddle.net/6trb0whz/它在这里工作https://jsfiddle.net/6trb0whz/
but it doesn't work here can someone help me solve this, please但它在这里不起作用有人可以帮我解决这个问题吗
<!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>
UPDATE It works now for one time then disappears after clicking on the third radio button更新它现在工作一次然后在点击第三个单选按钮后消失
you can try it in here https://jsfiddle.net/ujvr082w/你可以在这里试试https://jsfiddle.net/ujvr082w/
This is the code这是代码
<!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>
You can put your script after creationg your html.您可以在创建 html 后放置脚本。 If you put before html in dropdown menu It take all value in dropdown menu.如果你把 html 放在下拉菜单中，它会在下拉菜单中获取所有值。
解决方案2
0 2019-11-24 23:23:10
One problem could be that you have not closed your <script> tag at the end, right after </select> and before <body> . 一个问题可能是您没有在</select>和<body>之前关闭<script>标签。
To close a
<script>tag use</script><script>标记，请使用</script>
Another problem could be that you forgot to delete <! - - 另一个问题可能是您忘记删除<! - - <! - - (between the two middle scripts). <! - - （在两个中间脚本之间）。
Also, could be the <br /> tag at the end! 另外，也可以是结尾的<br />标签！
Hoped this solved your problem! 希望这解决了您的问题！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.