Question

我有两个下拉菜单：dropdown1和dropdown2。 dropdown2被禁用以开始。您可以使用复选框启用dropdown2。启用后，您可以在下拉列表中选择一个选项，它将在另一个下拉列表中显示为已禁用。这有两种方式。假设在dropdown2中选择了一个选项（因此在dropdown1中禁用它），并取消选中该复选框以禁用dropdown2。我希望dropdown1中的选项随后被启用，因为dropdown2作为一个整体被禁用。取消选中该复选框时，我将dropdown2的selectedIndex设置为0，但它不起作用。这可能很难遵循，所以我做了一个codepen：

http://codepen.io/cavanflynn/pen/mJvzgg

HTML

<select name="dropdown1" id="dropdown1">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="dropdown2" id="dropdown3" class="dropdown-lower">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<input type="checkbox" id="checkbox"/>

的Javascript

$(document).ready(function() {
    $(".dropdown-lower").prop("disabled", true);
});

$("#checkbox").click(function () {
    if ($(this).is(":checked")) {
        $(".dropdown-lower").prop("disabled", false);
    } else {
         $(".dropdown-lower").prop("disabled", true);
        document.getElementById("dropdown3").selectedIndex = "0";
        document.getElementById("dropdown-operator2").selectedIndex = "0";
        document.getElementById("dropdown4").selectedIndex = "0";
    }
});


if ($(".dropdown-lower").prop("disabled", false)) {

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

$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

如果您取消选中该复选框，则可以在第一个下拉列表中迭代该选项并启用已禁用的所有选项。检查此代码http://codepen.io/osha90/pen/oXmQYV

<select name="dropdown1" id="dropdown1">
 <option></option>
 <option value="1">Test 1</option>
 <option value="2">Test 2</option>
 <option value="3">Test 3</option>
 </select>

 <select name="dropdown2" id="dropdown3" class="dropdown-lower">
  <option></option>
 <option value="1">Test 1</option>
 <option value="2">Test 2</option>
 <option value="3">Test 3</option>
</select>

<input type="checkbox" id="checkbox"/>

Js代码

    $(document).ready(function() {
    $(".dropdown-lower").prop("disabled", true);
});

$("#checkbox").click(function () {
    if ($(this).is(":checked")) {
        $(".dropdown-lower").prop("disabled", false);
    } else {
        $(".dropdown-lower").prop("disabled", true);
        document.getElementById("dropdown3").selectedIndex = "0";
      console.log($("#dropdown1 option:disabled"));
      $("#dropdown1 option:disabled").prop("disabled",false);
        document.getElementById("dropdown-operator2").selectedIndex = "0";
        document.getElementById("dropdown4").selectedIndex = "0";
    }
});


if ($(".dropdown-lower").prop("disabled", false)) {

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

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

下拉选项不会重新启用

1 个答案: