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

我得到了以下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>

甚至

$("#first").setOptions()

但不幸的是，事实并非如此。这对我来说非常复杂，因为我不太了解JQuery

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

您可以在选择中选择单个选项

在第一次选择时处理事件，并在此基础上在第二次选择时禁用正确选项

---

在第一次选择时处理事件onSelect，并在此基础上在第二次选择时禁用property

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

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

---

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

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

试试这个：

HTML:

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

尝试以下操作：

HTML:

---

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

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

$document.on'change'，'first'，函数{ var firstVal=$'first'.val； var secondVal=$'second'.val； 如果firstVal==secondVal{ $'second'.val0； } }; $document.on'change'，second'，函数{ var firstVal=$'first'.val； var secondVal=$'second'.val； 如果firstVal==secondVal{ $'first'.val0； } }; 违约 一 二 三 违约 一 二 三

---

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

$document.on'change'，'first'，函数{ var firstVal=$'first'.val； var secondVal=$'second'.val； 如果firstVal==secondVal{ $'second'.val0； } }; $document.on'change'，second'，函数{ var firstVal=$'first'.val； var secondVal=$'second'.val； 如果firstVal==secondVal{ $'first'.val0； } }; 违约 一 二 三 违约 一 二 三

---

您是否尝试禁用选择？在一个选项中进行选择时，请禁用另一个选项中相应的选项？我不明白，我通过禁用整个选择解决了什么问题…如果您想选择选项，请在打开选择生成选项之前使用我建议的$'first>option'。您是否尝试禁用选择？当在一个选项中进行选择时，禁用另一个选项中的相应选项？我不明白，我通过禁用整个选择解决了什么问题…如果您想选择选项，请在打开选择生成选项之前使用我建议的$'first>option'，另一种方法也是，另一种方法当然您也要启用以前禁用的选项？人们会改变他们的想法你肯定也想启用以前禁用的选择吗？人们会改变他们的想法，因为这是可行的，我的也是。不幸的是，对于社区来说，人们否决了以不同方式完成任务的工作答案。干得好，我的也一样。不幸的是，对于社区来说，人们否决了以不同方式完成任务的工作答案。干得好。

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;
      }
    });
});