根據另一個選擇中選擇的值禁用或啟用選擇選項

Question

我創建了 2 個我想要級聯的選擇列表。 我的意思是，如果值 x 被選擇到第一個選擇中，那么應該禁用第二個選擇的值 x、y、z 等，並啟用值 w 等。

我的以下腳本不起作用。 我可以在第一個選擇中選擇一個值，在第二個選擇中禁用或啟用正確的值，但是當我再次將值更改為第一個選擇時，在第二個選擇中仍然禁用或啟用相同的值：

 $('#form').on('change', function() { var pl1 = document.getElementById('ordersdetailID_portion').value; // partyloafportionID if (pl1 == 1) { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true); } else if (pl1 == 2) { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true); } else if (pl1 == 3) { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true); } else if (pl1 == 4) { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', false); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="ordersdetailID_portion" name="child-ID_portion" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" required=""> <option value="">** Veuillez saisir une option Nombre de sandwiches</option> <option value="4">100</option> <option value="1">30</option> <option value="2">60</option> <option value="3">80</option> </select> <select id="ordersdetailpartyloafweightID" name="child-partyloafweightID" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" required=""> <option value="">** Please choose the appropriate weight</option> <option value="2" disabled="">1 Kg</option> <option value="3" disabled="">1.5 Kg</option> <option value="4">2 Kg</option> <option value="5">2.5 Kg</option> <option value="1" disabled="">600 g</option> </select>

Answer 1

DRY（不要重復自己）

我不是 100% 確定我的組合是正確的，但這是我會使用的方法

無需設置禁用，我只需在加載時觸發更改

 $('#ordersdetailID_portion').on('change', function() { var pl1 = +this.value, // partyloafportionID $weight = $('#ordersdetailpartyloafweightID'); $('option[value="1"]',$weight).prop('disabled', pl1 != 1); $('option[value="2"]',$weight).prop('disabled', pl1 != 2); $('option[value="3"]',$weight).prop('disabled', pl1 != 3); $('option[value="4"]',$weight).prop('disabled', pl1 != 4 && pl1 != 5); $('option[value="5"]',$weight).prop('disabled', pl1 != 4 && pl1 != 5); }).change();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="ordersdetailID_portion" name="child-ID_portion" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" required=""> <option value="">** Veuillez saisir une option Nombre de sandwiches</option> <option value="4">100</option> <option value="1">30</option> <option value="2">60</option> <option value="3">80</option> </select> <select id="ordersdetailpartyloafweightID" name="child-partyloafweightID" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" required=""> <option value="">** Please choose the appropriate weight</option> <option value="2">1 Kg</option> <option value="3">1.5 Kg</option> <option value="4">2 Kg</option> <option value="5">2.5 Kg</option> <option value="1">600 g</option> </select>

Answer 2

您的代碼document.getElementById('ordersdetailID_portion').value; 返回一個string ，但您正在檢查該數字。

此外，在每次更改時，您必須首先將所有選項的disabled重置為false 。 檢查下面的代碼：

 $('form').on('change', function() { $('#ordersdetailpartyloafweightID option').prop('disabled', false); var pl1 = document.getElementById('ordersdetailID_portion').value; // partyloafportionID if (pl1 == "1") { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true); } else if (pl1 == "2") { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true); } else if (pl1 == "3") { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', true); } else if (pl1 == "4") { console.log('ID_portion:', pl1); $('#ordersdetailpartyloafweightID option[value="1"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="2"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="3"]').prop('disabled', true); $('#ordersdetailpartyloafweightID option[value="4"]').prop('disabled', false); $('#ordersdetailpartyloafweightID option[value="5"]').prop('disabled', false); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <select id="ordersdetailID_portion" name="child-ID_portion" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" required=""> <option value="">** Veuillez saisir une option Nombre de sandwiches</option> <option value="4">100</option> <option value="1">30</option> <option value="2">60</option> <option value="3">80</option> </select> <select id="ordersdetailpartyloafweightID" name="child-partyloafweightID" class="form-control select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" required=""> <option value="">** Please choose the appropriate weight</option> <option value="2">1 Kg</option> <option value="3">1.5 Kg</option> <option value="4">2 Kg</option> <option value="5">2.5 Kg</option> <option value="1">600 g</option> </select> </form>