Update Выберите меню на основе другого выбора

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"> 
 
\t \t <option value="Vodafone">فودافون </option> 
 
\t \t <option value="Etisalat">اتصالات </option> 
 
\t \t <option value="Orange">اورانج </option> 
 
\t </select></label> 
 
\t <label>الرقم 
 
\t <input type="number" style="width:90px" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="phone" placeholder="رقم المحمول"/> </label> 
 
\t 
 
<select id="states"> 
 
    <optgroup label="Vodafone"> 
 
\t <?php for ($x = 1; $x <= 200; $x++) { 
 
    echo "<option value='" . $x . "'>" . $x . "</option>"; 
 
} 
 
?> 
 
    </optgroup> 
 
\t <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> 
 
\t \t <?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> 
 
\t <optgroup label="Orange"> 
 
\t <?php for ($z= 2; $z <= 20; $z++) { 
 
    echo "<option value='" . $z . "'>" . $z . "</option>"; 
 
} 
 
?> 
 
     <option value="25">25</option> 
 
\t \t <?php for ($za= 30; $za <= 100; $za=$za+10) { 
 
    echo "<option value='" . $za . "'>" . $za . "</option>"; 
 
} 
 
?> 
 
\t \t <option value="200">200</option> 
 
\t \t <option value="500">500</option> 
 
    </optgroup> 
 
\t </select>

I попробовал также сделать JS как функцию и использовать его как onclick в первом меню выбора, но ничего не изменилось!

Answer 1

Я все скрывал и показывал с помощью javascript. Это не идеально, обычно вы хотели бы сделать ajax-вызов на изменение, иметь пустой div и заполнить ответ от запроса Ajax в этот div. Но я не могу написать PHP-код во фрагменте.

Решение ниже работает, хотя.

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>