Question

我需要几个复选框，检查时每个复选框都有自己的下拉列表。

但是当点击几个时，会显示完全不同的下拉列表。

例如：

选中时，

Checkbox1显示dropdown1 Checkbox2选中后会显示dropdown2

选中Checkbox1和Checkbox2时会显示dropdown3

到目前为止，我已经能够拥有 Checkbox1选中后会显示dropdown1 Checkbox2选中后会显示dropdown2

和

当选中BOTH Checkbox1和Checkbox2时，显示dropdown3

但我尝试编码的两种方式仍然显示dropdown1和dropdown3＆lt; ==主要问题

    function showSelect() {
      var d = document.getElementById("dropdown1");
      if (document.getElementById("checkbox1").checked) {
        d.style.display = "block";
      } else {
        d.style.display = "none";
        d.selectedIndex = 0;
      }
      var d = document.getElementById("dropdown2");
      if (document.getElementById("checkbox2").checked) {
        d.style.display = "block";
      } else {
        d.style.display = "none";
        d.selectedIndex = 0;
      }
    }

    $("#checkbox1, #checkbox2").click(function() {
      if ($("#checkbox1").is(':checked') == true && $("#checkbox2").is(':checked') == true) {
        $("#dropdown3").removeAttr("style");
        $("#dropdown1").attr("style");
        $("#dropdown2").attr("style");

      } else {
        $("#dropdown3").attr("style", "display:none");
      }
    });

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
  <input type="checkbox" id="checkbox1" onclick="showSelect()">checkbox1
  <br>

  <input type="checkbox" id="checkbox2" onclick="showSelect()">checkbox2
  <br>

  <div id="dropdown1" style="display:none">
    <select id="myselect">
      <option value="">-- Budget --</option>
      <option value="A">up to $1000</option>
      <option value="B">$1000-$1500</option>
      <option value="C">$1500-$2000</option>
      <option value="D">$2000 and up</option>
    </select>
  </div>

  <div id="dropdown2" style="display:none">
    <select id="myselect">
      <!-- SEO Options -->
      <option value="Y">-- Monthly Budget --</option>
      <option value="K">up to $500</option>
      <option value="L">$500-$1500</option>
      <option value="M">$1500-$3000</option>
      <option value="N">$3000-$5000</option>
      <option value="O">$5000-$10,000</option>
      <option value="P">$10,000 and up</option>
    </select>
  </div>

  <div id="dropdown3" style="display:none">
    <select id="myselect">
      <!-- SEO Options -->
      <option value="Y">-- NEW --</option>
      <option value="K">up to $500</option>
      <option value="L">$500-$1500</option>
      <option value="M">$1500-$3000</option>
      <option value="N">$3000-$5000</option>
      <option value="O">$5000-$10,000</option>
      <option value="P">$10,000 and up</option>
    </select>
  </div>
</body>

</html>

Answer 1

由于看起来您正在使用jQuery，因此您可以删除复选框的onclick属性，并按照以下方式执行：

$(document).ready(function () {

    $("#checkbox1, #checkbox2").click(function () {
        var check1 = $("#checkbox1").is(":checked");
        var check2 = $("#checkbox2").is(":checked");

        $("#dropdown1").hide();
        $("#dropdown2").hide();
        $("#dropdown3").hide();

        if (check1 && check2) {
            $("#dropdown3").show();
        }
        else if (check1) {
            $("#dropdown1").show();
        }
        else if (check2) {
            $("#dropdown2").show();
        }

    });

});

请参阅小提琴：http://jsfiddle.net/4sw6xmpa/

Answer 2

我刚用这种简化方法创建了Fiddle：

$("#checkbox1, #checkbox2").on("click", function () {
  $("#checkbox1").is(":checked") ? $("#dropdown1").show() 
                                 : $("#dropdown1").hide();
  $("#checkbox2").is(":checked") ? $("#dropdown2").show() 
                                 : $("#dropdown2").hide();
 ($("#checkbox1").is(":checked") && $("#checkbox2").is(":checked")) 
      ? $("#dropdown3").show() : $("#dropdown3").hide();
});

在小提琴中，我留下了控制台日志消息，以显示每次点击时选中的复选框。

如何为不同的复选框显示不同的下拉列表＆amp;然后检查多个复选框时的不同下拉菜单？

2 个答案: