如何为不同的复选框显示不同的下拉列表，然后在选中多个复选框时显示不同的下拉列表

How can you show different dropdowns for different checkboxes & then different dropdown when multiple checkboxes are checked?

本文关键字：复选框 显示 下拉列表 然后      更新时间：2023-09-26

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

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

例如：

复选框 1 选中时显示下拉列表 1复选框 2 选中时显示下拉列表2

选中复选框 1 和复选框 2 时，将显示下拉列表3

到目前为止，我已经能够拥有复选框 1 选中时显示下拉列表 1复选框 2 选中时显示下拉列表2

和

选中复选框 1 和复选框 2 时，将显示下拉列表3

但是我尝试编码的两种方式仍然继续显示下拉列表1和下拉列表3 <==主要问题

    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>

由于看起来您正在使用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/

我刚刚用这种简化的方法创建了一个小提琴：

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

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

相关文章：