i have list of mobile networks , 1 price, want when user change select first selection 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 ($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 ($y = 5; $y <= 10; $y++) { echo "<option value='" . $y . "'>" . $y . "</option>"; } ?> <?php ($ya = 15; $ya <=100; $ya=$ya+5) { echo "<option value='" . $ya . "'>" . $ya . "</option>"; } ?> <option value="250">250</option> </optgroup> <optgroup label="orange"> <?php ($z= 2; $z <= 20; $z++) { echo "<option value='" . $z . "'>" . $z . "</option>"; } ?> <option value="25">25</option> <?php ($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 make js function , use onclick on first select menu nothing changed !
i did hiding , showing javascript. not ideal, want make ajax call on change, have empty div, , populate response ajax request div. can't write php code in 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>
Comments
Post a Comment