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