Question

我有两个具有相同选项的选择下拉菜单。用户可以从两个选择下拉列表中选择“Office地址”。但“家庭/学校地址”选项只能从下拉列表中选择一次。我提到了其他堆栈溢出的答案并做了一些调整。但我无法解决以下两个问题。请帮我。 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);
    }
});

Answer 1

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

请注意，使用jQuery时，如果要在加载所有dom元素后运行某些代码，最好使用load而不是GET /sa/_search { "query" : { "bool" : { "should" : { "multi_match" : { "query" : "oasis", "fields" : [ "label", "content" ] } } } }, "highlight" : { "order" : "score", "fields" : { "label" : { }, "content" : { "fragment_size" : 250 } } } }。

Answer 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/

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

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

3 个答案: