Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
262 views
in Technique[技术] by (71.8m points)

javascript - Multiple jQuery Scripts in one HTML page Not working together

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?

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

  <!DOCTYPE html>
<html>
<head>
</head>
<body>
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>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
(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>
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The issue is that you have 3 functions that largely do the same thing and they all share the same variable. Instead of 3 functions that work on one element each, make one function that works on all 3 elements.

Note that no ids are needed here, just classes to organize the sets of radio buttons with the matching option elements.

See the comments inline:

<!DOCTYPE html>
<html>
<head>
  <title>Order Selection</title>
  <style>
    /* Do all your styling in CSS not inline with the HTML */
    select { width:187px; display:block; margin:10px; }
    .hidden { display:none; }
    fieldset { margin-top:1em; margin-bottom:1em; }
    legend { font-weight:bold; }
  </style>
</head>
<body>
  <h1>Availabe Restaurants:</h1>
  
  <fieldset>
    <legend>Burgers:</legend>

    <label><input type="radio" name="burgers" value="Garage"> Burger Garage</label>
    <label><input type="radio" name="burgers" value="Burger"> Hardee's</label>
    <label><input type="radio" name="burgers" value="Factory"> Burger Factory &amp; More</label>

    <select name="burgers">
      <option value="">--- Select Burger ---</option>    
      <option class="Garage" value="Garage_Style_1">Original Burger</option>
      <option class="Garage" value="Garage_Style_2">Twin Turbo Chicken</option>
      <option class="Garage" value="Garage_Style_3">Shuwa Burger</option>
      <option class="Burger" value="Burger_Style_1">Chicken Fille</option>
      <option class="Burger" value="Burger_Style_2">Grilled Chicken Fillet</option>
      <option class="Burger" value="Burger_Style_3">Jalapeno Chicken</option>
      <option class="Factory" value="Factory_Style_1">Turbo Chicken</option>
      <option class="Factory" value="Factory_Style_2">Twin Turbo Chicken</option>
      <option class="Factory" value="Factory_Style_3">Garage Burger</option>        
    </select>
  </fieldset>
  <fieldset>
    <legend>Beverages:</legend>

    <label><input type="radio" name="beverages" value="Dr" />Dr.Shake</label>
    <label><input type="radio" name="beverages" value="Juice"> Juice Lab</label>
    <label> <input type="radio" name="beverages" value="Aseer"> Aseer Time</label>

    <select name="beverages">
      <option value="">--- Select Beverage ---</option>       
      <option class="Dr" value="Dr_Style_1">Pressure Milkshake</option>
      <option class="Dr" value="Dr_Style_2">Thermometer Milkshake</option>
      <option class="Dr" value="Dr_Style_3">Brain Recovery Milkshake</option>
      <option class="Juice" value="Juice_Style_1">G Lab</option>
      <option class="Juice" value="Juice_Style_2">Summer Vimto</option>
      <option class="Juice" value="Juice_Style_3">Summer Bubble Gum</option>
      <option class="Aseer" value="Aseer_Style_1">Hormone Happiness</option>
      <option class="Aseer" value="Aseer_Style_2">The King</option>
      <option class="Aseer" value="Aseer_Style_3">Berry Smothey</option>
    </select>
  </fieldset>
    
  <fieldset>
    <legend>Desserts:</legend>

    <label><input type="radio" name="desserts" value="Dip"> Dip N Dip</label>
    <label><input type="radio" name="desserts" value="Camel"> Camel Cookies</label>
    <label> <input type="radio" name="desserts" value="Ravenna"> Ravenna Kunafa</label>

    <select name="desserts">
      <option value="">--- Select Dessert ---</option>       
      <option class="Dip" value="Dip_Style_1">Brownies Crepe</option>
      <option class="Dip" value="Dip_Style_2">Fettuccine Crepe</option>
      <option class="Dip" value="Dip_Style_3">Cream Puff Pyramid</option>
      <option class="Camel" value="Camel_Style_1">Brownie Fondant</option>
      <option class="Camel" value="Camel_Style_2">Lotus Pancake</option>
      <option class="Camel" value="Camel_Style_3">Camel Lava</option>
      <option class="Ravenna" value="Ravenna_Style_1">Konafa With Chocolate</option>
      <option class="Ravenna" value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
      <option class="Ravenna" value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
    </select>
  </fieldset>


  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script>

    // Hide the dropdown lists until a radio button selection is made
    $("select").hide();

    // Set up a change event handler for each of the radio buttons
    $('input:radio').on("change", updateChoices);

    function updateChoices(e) {
      // Show the appropriate list based on the name of the radio button that was changed
      $('select[name="' + this.name  + '"]').show();
      
      // Reset any previously selected option in the list back to the default
      $('select[name="' + this.name  + '"]').val($('select[name="' + this.name  + '"] option:first').val());
  
      // Update the <option> elements in the corresponding <select>
      $('select[name="' + this.name  + '"] option').each(function(index,element){
      
        // If the option has the same class as the radio button that was changed...
        if($(element).hasClass(e.target.value)){
          $(element).show();  // Show the option
        } else {
          $(element).hide();  // Hide the option
        }
      });  
    }

  </script>
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...