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

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>

Solution

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/