JSFiddle demo

Question

我收到了以下HTML代码：

<select id="first">
  <option value="0" selected="selected"> default </option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="second">
  <option value="0" selected="selected"> default </option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

所以他们都有相同的数据。我需要确保，用户无法在两者中选择相同的值。

我希望，JQuery有一些不错的功能，如：

$("#first").getOptions()

甚至

$("#first").setOptions()

但不幸的是，它并没有。这对我来说非常复杂，因为我不太了解JQuery ......

那么，解决我问题的最佳方法是什么？

Answer 1

您可以select

中disable个选项

<select id="second">
  <option value="0" selected="selected"> default </option>
  <option value="1">One</option>
  <option value="2" disabled>Two</option>
  <option value="3">Three</option>
</select>

在第一个onSelect处理事件select并根据它在第二个<option>

中停用正确的select

Answer 2

您可以通过执行以下操作获取当前所选选项的值：

$('#first option:selected').text();
$('#second option:selected').text();

假设我理解您的问题，您不希望用户能够在每个框中输入相同的值。所以，类似于：

$first = $('#first');
$second = $('#second');

$first.on('change', function() {
    $second.find('option').attr('disabled', false);
    var firstVal = $first.find('option:selected').text();
    $second.find('option:contains("'+ firstVal +'")').attr('disabled', true);
});

$second.on('change', function() {
    $first.find('option').attr('disabled', false);
    var secondVal = $second.find('option:selected').text();
    $first.find('option:contains("'+ secondVal +'")').attr('disabled', true);
});

我应该注意到，有很多方法可以实现getOptions()和setOptions()个想法，您可以$select.find('option')来获取选项。要设置它们，请在html中定义一些选项，并将select元素的innerHTML设置为这些元素：

var options = '<option value="0" selected="selected"> default </option>
               <option value="1">One</option>
               <option value="2">Two</option>
               <option value="3">Three</option>';

$select.html(options);

JSFiddle demo

Answer 3

试试这个（codepen）：

<强> HTML：

<select id="first">
  <option value="0" selected="selected"> default </option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="second">
  <option value="0" selected="selected"> default </option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<强>的Javascript / jQuery的：

var strUser;
var strUser2;

$(function() {
    $("#first").change(function() {
      var e = document.getElementById("first");
      strUser = e.options[e.selectedIndex].text;
      if (strUser == strUser2) {
        alert("Dropdowns contain the same value. Change one.")
      document.getElementById("first").disabled=true;
      } else {
        document.getElementById("second").disabled=false;
      }
    });
});

$(function() {
    $("#second").change(function() {
      var e = document.getElementById("second");
      strUser2 = e.options[e.selectedIndex].text;
      if (strUser2 == strUser) {
        alert("Dropdowns contain the same value. Change one.")
        document.getElementById("second").disabled=true;
      } else {
        document.getElementById("first").disabled=false;
      }
    });
});

本质上，此代码将从更改的下拉列表中检索选定的值，然后进行比较。如果值相等，则将禁用最近选择的下拉列表。然后，您必须在另一个下拉列表中选择其他值以重新启用已禁用的下拉列表。这是显示工作功能的codepen。这不允许用户选择两个相同的值而不禁用和关闭下拉列表。

Answer 4

当一个更改时，如果另一个相同，您可以将其更改为默认值，如下所示。

＆＃13;

$(document).on('change', '#first', function() {
    var firstVal = $('#first').val();
    var secondVal = $('#second').val();
    if (firstVal == secondVal) {
        $('#second').val(0);
    }
});

$(document).on('change', '#second', function() {
    var firstVal = $('#first').val();
    var secondVal = $('#second').val();
    if (firstVal == secondVal) {
        $('#first').val(0);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first">
  <option value="0" selected="selected"> default </option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="second">
  <option value="0" selected="selected"> default </option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

＆＃13;

两个HTML选择具有不同的选定值

4 个答案:

JSFiddle demo