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

Question

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

727 Views Asked by Merissa Kelley At 10 April 2025 at 18:30

I'm needing several checkboxes that when checked each one has their own dropdown.

But when several are clicked an entirely different dropdown is shown.

For Example:

Checkbox1 when checked shows dropdown1 Checkbox2 when checked shows dropdown2

When Checkbox1, and Checkbox2 are checked shows dropdown3

So far I have been able to have Checkbox1 when checked shows dropdown1 Checkbox2 when checked shows dropdown2

AND

When BOTH Checkbox1 and Checkbox2 are checked shows dropdown3

But both ways that I try to code it still continues to shows dropdown1 and dropdown3 <== MAIN PROBLEM

    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>

Original Q&A

There are 2 best solutions below

matthias_h On 26 November 2014 at 20:32

I've just created a Fiddle with this simplified approach:

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

In the Fiddle I left console log messages to display which checkboxes are checked on each click.

**Slippery Pete** · Accepted Answer

Since it looks like you are using jQuery you can remove the onclick attributes of the checkboxes and just do it like this:

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

    });

});

See fiddle: http://jsfiddle.net/4sw6xmpa/

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CHECKBOX

Related Questions in DROPDOWNBOX

Trending Questions

Popular # Hahtags

Popular Questions