javascript - 具有不同选择值的两个 HTML 选择

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

您可以通过以下方式获取当前选中选项的值:

$('#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