從選擇框中選擇一個值並使用 jquery 從另一個選擇框中自動選擇一個值

Question

我有兩個選擇框。 第一個選擇框的id為#first，第二個選擇框的id為#second。

每個選擇框都有兩個選項，值為 1,2。 我希望當我從第一個選擇框中選擇第一個選項時自動從第二個選擇框中選擇第二個選項，當我從第一個框中選擇第二個選項時自動選擇第二個選擇框中的第一個選項：

這是我的代碼：

 $(document).ready(function() { $('#first').change(function() { var val = $('#first').prop('selectedIndex'); $("#second").prop('selectedIndex', val); if (val == "1") { $("#second").prop('selectedIndex', val == "2"); } else if (val == "2") { $("#second").prop('selectedIndex', val == "1"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an orange</option> <option value="2" style="color:#000;">You got an apple</option> </select>

Answer 1

您可以使用.val()通過其值設置select ，在您的情況下，因為您只有 2 個值，您可以通過option value=而不是它的selectedIndex設置新值：

$("#second").val(val == 1 ? 2 : 1);

更新的片段：

 $(document).ready(function() { $('#first').change(function() { var val = $('#first').val() * 1; $("#second").val(val == 1 ? 2 : 1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an orange</option> <option value="2" style="color:#000;">You got an apple</option> </select>

---

為了完整起見，要繼續使用selectedIndex （與value=略有不同），它非常相似，因為option值與索引相同，如果不是，則您需要更改上面的值，但不是如果使用 selectedIndex - 相反，如果您更改option的順序，則使用 value 仍然有效，而使用 selectedIndex 將停止工作。

 $(document).ready(function() { $('#first').change(function() { var val = $('#first').prop('selectedIndex'); $("#second").prop('selectedIndex', val === 1 ? 2 : 1); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an orange</option> <option value="2" style="color:#000;">You got an apple</option> </select>

Answer 2

在同一索引上創建選項會容易得多。 所以蘋果將是兩個選擇中的第一個，橙色將是兩個選擇中的第二個，依此類推......

 $(document).ready(function() { $('#first').change(function() { $("#second").prop('selectedIndex', $('#first').prop('selectedIndex')); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <select name="first" style="cursor:pointer;" id="first" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">First select</option> <option value="1" style="color:#000;">I want an apple</option> <option value="2" style="color:#000;">I want an orange</option> </select> <select name="second" style="cursor:pointer;" id="second" placeholder="Please select"> <option value="" disabled="" selected="" hidden="">Second select</option> <option value="1" style="color:#000;">You got an apple</option> <option value="2" style="color:#000;">You got an orange</option> </select>