从选择框中选择一个值并使用 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>