How can I use jQuery in html to display the drop down menu correctly

Question

hi I am new to jQuery and I am trying to implement it to an HTML code but it doesn't work

it works here 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/

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>

delete everything between <body> and <script src="https://code.jquery.com/jquery-latest.min.js"></script> and should works — Mattia
– Mattia, Commented Nov 24, 2019 at 22:55
@Mattia I did edit everything you said but still it did not work I think it is from the jQuery library — The-_-King_ 464
– The-_-King_ 464, Commented Nov 25, 2019 at 1:27

Mitava Zatakiya · Accepted Answer · 2019-11-25 07:03:01Z

<!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. If you put before html in dropdown menu It take all value in dropdown menu.

Collectives™ on Stack Overflow

How can I use jQuery in html to display the drop down menu correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related