你怎么能显示不同的复选框,然后与不同的下拉菜单不同的下拉列表中,当多个复选框被选中?

梅丽莎·凯莉(Merissa Kelley)

我需要几个复选框,当每个复选框选中时,都有自己的下拉菜单。

但是,当单击多个按钮时,会显示一个完全不同的下拉列表。

例如:

选中时的Checkbox1显示下拉列表1选中时的Checkbox1显示下拉列表2

选中Checkbox1和Checkbox2时显示dropdown3

到目前为止,我已经拥有Checkbox1(在选中时显示了dropdown1)和Checkbox2(选中时显示了dropdown2)。

当同时选中Checkbox1和Checkbox2时,显示dropdown3

但是我尝试编码的两种方式仍然继续显示dropdown1和dropdown3 <==主要问题

    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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章