Update Select Menu based on another Selection

Question

I have a list of mobile networks and another one for the price, I want when user change select from first selection the other changing

<script>

$("#network").on("change", function() {
    $states = $("#states");
    $states.find("optgroup").hide().children().hide();
    $states.find("optgroup[label='" + this.value + "']").show().children().show();
    $states.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
});

</script>

<select name="network" id="network">
  <option value="Vodafone">فودافون </option>
  <option value="Etisalat">اتصالات </option>
  <option value="Orange">اورانج </option>
 </select></label>
  <label>الرقم
   <input type="number" style="width:90px" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="phone" placeholder="رقم المحمول"/> </label>
  
<select id="states">
    <optgroup label="Vodafone">
 <?php for ($x = 1; $x <= 200; $x++) {
     echo "<option value='" . $x . "'>" . $x . "</option>";
} 
?>
    </optgroup>
 <optgroup label="Etisalat">
        <option value="0.5">0.5</option>
        <option value="1">1</option>
        <option value="1.5">1.5</option>
        <option value="3">3</option>
        <option value="4">4</option>
  <?php for ($y = 5; $y <= 10; $y++) {
     echo "<option value='" . $y . "'>" . $y . "</option>";
} 
?>
<?php for ($ya = 15; $ya <=100; $ya=$ya+5) {
     echo "<option value='" . $ya . "'>" . $ya . "</option>";
} 
?>
 <option value="250">250</option>
    </optgroup>
  <optgroup label="Orange">
 <?php for ($z= 2; $z <= 20; $z++) {
     echo "<option value='" . $z . "'>" . $z . "</option>";
} 
?>
        <option value="25">25</option>
  <?php for ($za= 30; $za <= 100; $za=$za+10) {
     echo "<option value='" . $za . "'>" . $za . "</option>";
} 
?>
  <option value="200">200</option>
  <option value="500">500</option>
    </optgroup>
 </select>

I tried also make the JS as a function and use this as onclick on first select menu but nothing changed !

Can you please elaborate? Which second selection are you talking about? and what should it change to? — zsawaf, Jul 21 '16 at 17:57
The first select is the main menu , and others are the childs of the main ,example if the user choose Vodafone from the first select so the second selection loading the Vodafone options group — Mohamed Syam, Jul 21 '16 at 18:49

score 0 · Accepted Answer · answered Jul 21 '16 at 19:06

I did all the hiding and showing with javascript. This is not ideal, usually you would want to make an ajax call on change, have an empty div, and populate the response from the Ajax request into that div. But I can't write php code in the snippet.

The solution below works though.

var initial = "vodafone";

$("#main-select").change(function(){
  var value = $(this).val();
  $("."+initial).toggleClass("visible");
  $("."+value).toggleClass("visible");
  initial = value;
});

.select-container {
  display: flex;
  justify-content: space-between;
}

.select {
  display: none;  
}

.visible {
  display: block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="select-container">
  <select id="main-select">
    <option value="vodafone">Vodafone</option>
    <option value="etisalat">Etisalat</option>
    <option value="zain">Zain</option>
  </select>

  <select class="select vodafone visible">
    <option>Vodafone 1</option>
    <option>Vodafone 2</option>
    <option>Vodafone 3</option>
  </select>

  <select class="select etisalat">
    <option>Etisalat 1</option>
    <option>Etisalat 2</option>
    <option>Etisalat 3</option>
  </select>
  
  <select class="select zain">
    <option>Zain 1</option>
    <option>Zain 2</option>
    <option>Zain 3</option>
  </select>
</div>

Zsawaf thanks for your works but i did whole those but still not working i put the javascript in the header between script tags and css alo as style tags and html as you wrote ?!!!, im showing your codes working well here but i dont know what happening ! — Mohamed Syam, Jul 21 '16 at 19:39
http://stackoverflow.com/questions/6625773/where-should-i-put-the-css-and-javascript-code-in-an-html-webpage @MohamedSyam — zsawaf, Jul 21 '16 at 19:47
thanks it's working but that conflict when passing the value cuz all selection tag taking the same name — Mohamed Syam, Jul 22 '16 at 13:07
ah okay. This is just a naming convention I use. You can use your own convention :) — zsawaf, Jul 22 '16 at 13:20
im talking about the name of select ,assume :) here i have 3 selects with one name tag — Mohamed Syam, Jul 22 '16 at 13:49

Update Select Menu based on another Selection

1 Answers1