在下拉列表 1 中选择时隐藏下拉列表 2 中的一些选项，反之亦然答案

【问题标题】：Hide some options from dropdown 2 when selected in dropdown 1 and vice versa在下拉列表 1 中选择时隐藏下拉列表 2 中的一些选项，反之亦然
【发布时间】：2017-01-02 09:57:38
【问题描述】：

我有两个具有相同选项的选择下拉菜单。用户可以从两个选择下拉菜单中选择“办公地址”。但是“家庭/学校地址”选项只能从任一下拉菜单中选择一次。我参考了其他堆栈溢出答案并进行了一些调整。但我无法解决以下两个问题。请帮我。 1. 在页面加载时 - 在第二个下拉菜单中未禁用家庭地址 2.办公地址不应该被禁用，因为它可以从两个下拉菜单中选择

JS小提琴链接：https://jsfiddle.net/6qpudb52/

<select name="address1">
    <option value="1">Home address</option>
    <option value="2">School address</option>
    <option value="3">Office Address</option>
</select>

<select name="address2">
    <option val="">Select address</option>
    <option value="1">Home address</option>
    <option value="2">School address</option>
    <option value="3">Office Address</option>
</select>

Java 脚本：

var $dropdown1 = $("select[name='address1']");
var $dropdown2 = $("select[name='address2']");

$(document).load(function()  {
    $dropdown2.find('option').prop("disabled", false);
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
    }
});
$dropdown1.change(function() {
    $dropdown2.find('option').prop("disabled", false);
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
    }
});

$dropdown2.change(function() {
    $dropdown1.find('option').prop("disabled", false);
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
    }
});

【问题讨论】：

您需要this 还是this？
@Satpal，我认为这个 req 没有填满：- Office 地址不应该被禁用，因为它可以从两个下拉列表中选择
@Satpal ：感谢您的快速响应和帮助。 #2 问题在两个示例中都没有解决（当用户从任一下拉菜单中选择“办公地址”时，不应从两个下拉菜单中禁用办公地址）。
jsfiddle.net/satpalsingh/a2rujcg7/2我用过学校地址
@Satpal ：效果很好！！！谢谢！

标签： jquery

【解决方案1】：

看看这个小提琴： https://jsfiddle.net/hakeero/6qpudb52/4/

请注意，对于 jQuery，当您想在加载所有 dom 元素后运行一些代码时，最好使用 ready 而不是 load。

【讨论】：

还有要求。 2 也没有填满你的答案。
@mohammed-elsayed：谢谢。 #2 问题 - 当用户从任一下拉菜单中选择“办公地址”时，不应从两个下拉菜单中禁用办公地址，因为我们应该允许用户输入多个办公地址。
@Nikki：知道了，会在几分钟内更新答案。
我可以帮忙的空地:)

【解决方案2】：

尝试把 JS 代码改成这样：

$(document).ready(function()  {
var $dropdown1 = $("select[name='address1']");
var $dropdown2 = $("select[name='address2']");
$dropdown1.change(function() {
  var selectedItem = $(this).val();
  if (selectedItem && selectedItem != 3) {
    $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
}
}).change();

  $dropdown2.change(function() {
  var selectedItem = $(this).val();
  if (selectedItem && selectedItem != 3) {
    $dropdown1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
  }
  });
});

添加 JS 小提琴：https://jsfiddle.net/ox6cr2xd/

【讨论】：

它没有按预期工作，因为如果我从第一个下拉菜单中选择“学校地址”选项，则“家庭和学校”地址都会在第二个下拉菜单中被禁用，而不是单独禁用“学校地址”选项。 satpal 共享答案有助于解决这两个问题。 -jsfiddle.net/satpalsingh/a2rujcg7/2。感谢您的快速响应和支持
哦。很难理解你真正想要什么。只需更改 if 条件

【解决方案3】：

试试下面的

$(document).ready(function()  {
var $dropdown1 = $("select[name='address1']");
var $dropdown2 = $("select[name='address2']");
$dropdown1.change(function() {
  var selectedItem = $(this).val();
  $dropdown2.find('option').prop("disabled", false);
  if (selectedItem && selectedItem != 3) {
    $dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
  }
}).change();

$dropdown2.change(function() {
  var selectedItem = $(this).val();
  $dropdown2.find('option').prop("disabled", false);
  if (selectedItem && selectedItem != 3) {
    $dropdown1.find('option[value="' + selectedItem + '"]').prop("disabled", true);
  }
  });
});

【讨论】：