3个jQuery脚本无法在HTML页面中一起使用

Question

I have an HTML code with 3 jQuery Scripts and they are not working together correctly can SomeOne Help me to solve this, please

I do to solve this problem as I don't have any experience in jQuery

and how can I fix this issue?

It works now but one drop-down menu at a time how can I make them work together

  (function() { var options = $("#DropDownList2").html(); $('#DropDownList2 :not([value^="Fac"])').remove(); $('input:radio').change(function(e) { var text = $(this).val(); $("#DropDownList2").html(options); $('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove(); }); })(); (function() { var options = $("#DropDownList3").html(); $('#DropDownList3 :not([value^="Dip"])').remove(); $('input:radio').change(function(e) { var text = $(this).val(); $("#DropDownList3").html(options); $('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove(); }); })(); (function() { var options = $("#DropDownList4").html(); $('#DropDownList4 :not([value^="Dr"])').remove(); $('input:radio').change(function(e) { var text = $(this).val(); $("#DropDownList4").html(options); $('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove(); }); })(); 

 <script src = "https://code.jquery.com/jquery-latest.min.js"></script> Availabe Restaurants: <br> Burgers: <label><input type="radio" name="test" value="Garage" /> Burger Garage</label> <label><input type="radio" name="test" value="Burger" /> Hardee's</label> <label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label> <br> <select ID="DropDownList2" Height="18px" Width="187px"> <option Value="Factory_Style_1">Turbo Chicken</option> <option Value="Factory_Style_2">Twin Turbo Chicken</option> <option Value="Factory_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="Garage_Style_1">Original Burger</option> <option Value="Garage_Style_2">Twin Turbo Chicken</option> <option Value="Garage_Style_3">Shuwa Burger</option> </select> <br> Desserts: <label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label> <label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label> <label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label> <br> <select ID="DropDownList3" Height="18px" Width="187px"> <option Value="Dip_Style_1">Brownies Crepe</option> <option Value="Dip_Style_2">Fettuccine Crepe</option> <option Value="Dip_Style_3">Cream Puff Pyramid</option> <option Value="Camel_Style_1">Brownie Fondant</option> <option Value="Camel_Style_2">Lotus Pancake</option> <option Value="Camel_Style_3">Camel Lava</option> <option Value="Ravenna_Style_1">Konafa With Chocolate</option> <option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option> <option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option> </select> <br> Beverages: <option>Dr.Shake</option> <option>Juice Lab</option> <option>Aseer Time</option> <label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label> <label><input type="radio" name="test2" value="Juice" /> Juice Lab</label> <label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label> <br> <select ID="DropDownList4" Height="18px" Width="187px"> <option Value="Dr_Style_1">Pressure Milkshake</option> <option Value="Dr_Style_2">Thermometer Milkshake</option> <option Value="Dr_Style_3">Brain Recovery Milkshake</option> <option Value="Juice_Style_1">G Lab</option> <option Value="Juice_Style_2">Summer Vimto</option> <option Value="Juice_Style_3">Summer Bubble Gum</option> <option Value="Aseer_Style_1">Hormone Happiness</option> <option Value="Aseer_Style_2">The King</option> <option Value="Aseer_Style_3">Berry Smothey</option> </select> 

Answer 1

Your issue here is that your radio button change events are overlapping each other so they don't have scope they just override each other, see the changes below where the radio input are now wrapped in a container and each event is scoped separately.

it's worth noting that using scope around each section of dropdown and radio button set you could refactor your code into a single function can handle all events.

 (function() { var options = $("#DropDownList2").html(); $('#DropDownList2 :not([value^="Fac"])').remove(); $('.group1 input:radio').change(function(e) { var text = $(this).val(); $("#DropDownList2").html(options); $('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove(); }); })(); (function() { var options = $("#DropDownList3").html(); $('#DropDownList3 :not([value^="Dip"])').remove(); $('.group2 input:radio').change(function(e) { var text = $(this).val(); $("#DropDownList3").html(options); $('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove(); }); })(); (function() { var options = $("#DropDownList4").html(); $('#DropDownList4 :not([value^="Dr"])').remove(); $('.group3 input:radio').change(function(e) { var text = $(this).val(); $("#DropDownList4").html(options); $('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove(); }); })(); 

 <script src = "https://code.jquery.com/jquery-latest.min.js"></script> Availabe Restaurants: <br> Burgers: <div class="group1"> <label><input type="radio" name="test" value="Garage" /> Burger Garage</label> <label><input type="radio" name="test" value="Burger" /> Hardee's</label> <label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label> </div> <br> <select ID="DropDownList2" Height="18px" Width="187px"> <option Value="Factory_Style_1">Turbo Chicken</option> <option Value="Factory_Style_2">Twin Turbo Chicken</option> <option Value="Factory_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="Garage_Style_1">Original Burger</option> <option Value="Garage_Style_2">Twin Turbo Chicken</option> <option Value="Garage_Style_3">Shuwa Burger</option> </select> <br> Desserts: <div class="group2"> <label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label> <label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label> <label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label> </div> <br> <select ID="DropDownList3" Height="18px" Width="187px"> <option Value="Dip_Style_1">Brownies Crepe</option> <option Value="Dip_Style_2">Fettuccine Crepe</option> <option Value="Dip_Style_3">Cream Puff Pyramid</option> <option Value="Camel_Style_1">Brownie Fondant</option> <option Value="Camel_Style_2">Lotus Pancake</option> <option Value="Camel_Style_3">Camel Lava</option> <option Value="Ravenna_Style_1">Konafa With Chocolate</option> <option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option> <option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option> </select> <br> Beverages: <option>Dr.Shake</option> <option>Juice Lab</option> <option>Aseer Time</option> <div class="group3"> <label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label> <label><input type="radio" name="test2" value="Juice" /> Juice Lab</label> <label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label> </div> <br> <select ID="DropDownList4" Height="18px" Width="187px"> <option Value="Dr_Style_1">Pressure Milkshake</option> <option Value="Dr_Style_2">Thermometer Milkshake</option> <option Value="Dr_Style_3">Brain Recovery Milkshake</option> <option Value="Juice_Style_1">G Lab</option> <option Value="Juice_Style_2">Summer Vimto</option> <option Value="Juice_Style_3">Summer Bubble Gum</option> <option Value="Aseer_Style_1">Hormone Happiness</option> <option Value="Aseer_Style_2">The King</option> <option Value="Aseer_Style_3">Berry Smothey</option> </select>