更新根据其他选择选择菜单

Question

我有一个移动网络列表和另一个价格，我希望当用户更改从第一个选择中选择另一个更改

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

我尝试将JS作为一个函数，并在第一个选择菜单中将其用作onclick，但没有任何改变！

Answer 1

我用javascript完成了所有隐藏和显示。这并不理想，通常你会想要在更改时调用ajax，拥有一个空div，并将Ajax请求的响应填充到该div中。但我无法在代码段中编写php代码。

下面的解决方案有效。

＆＃13;

＆＃13;

var initial = "vodafone";

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

＆＃13;

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

.select {
  display: none;  
}

.visible {
  display: block;  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;