从选择框中选择一个值，然后使用jquery从另一个选择框中自动选择一个值

Designer 发表于常见问题

设计师

我有两个选择框。第一个选择框的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>

自由度

您可以select使用来设置其值.val()，因为您只有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则不需要-相反，如果更改options的顺序，则使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。