3個jQuery腳本無法在HTML頁面中一起使用

Question

我有一個包含3個jQuery腳本的HTML代碼，但它們無法正常工作，可以有人幫我解決這個問題嗎，請

我確實解決了這個問題，因為我沒有jQuery的經驗

以及如何解決此問題？

現在可以使用，但是一次只能使用一個下拉菜單

  (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

這里的問題是您的單選按鈕更改事件彼此重疊，因此它們沒有作用域，它們只能相互覆蓋，請參見下面的更改，其中單選按鈕輸入現在包裝在容器中，並且每個事件分別進行作用域。

值得注意的是，在下拉菜單和單選按鈕集的每個部分周圍使用范圍，可以將代碼重構為單個函數，從而可以處理所有事件。

 (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>