title: Filtering dropdown based on another dropdown selection Javascript
body: <p>I have 2 separate dropdown lists and submit button which takes the visitor to a unique URL based on selections.</p>
  
  <p>I need to get each dropdown to filter each other.</p>
  
  <p>for example: When someone chooses "Volvo" from the first dropdown menu, then the second drop-down menu shows only "Red" &amp; "White" and so on.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form&gt;
    &lt;select class="homepage-dropdown col-md-6 col-9" id="carbrand"&gt;
      &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
      &lt;option value="saab" selected="selected"&gt;Saab&lt;/option&gt;
      &lt;option value="opel"&gt;Opel&lt;/option&gt;
      &lt;option value="audi"&gt;Audi&lt;/option&gt;
    &lt;/select&gt;
  &lt;br&gt;
    &lt;select class="homepage-dropdown col-md-6 col-9" id="carcolor"&gt;
      &lt;option value="white"&gt;White&lt;/option&gt;
      &lt;option value="black" selected="selected"&gt;Black&lt;/option&gt;
      &lt;option value="red"&gt;Red&lt;/option&gt;
      &lt;option value="blue"&gt;Blue&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;br/&gt;&lt;br/&gt;
  
    &lt;input id="btnCallURL" type="button" value="بحث"&gt;  
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>document.getElementById('btnCallURL').onclick = function() { 
      var carbrandObj = document.getElementById('carbrand');
      var carcolorObj = document.getElementById('carcolor');
  
      var carbrandValue = carbrandObj.options[carbrandObj.selectedIndex].value;
      var carColorValue = carcolorObj.options[carcolorObj.selectedIndex].value;
  
      jsCallUrl(carbrandValue, carColorValue);
  }
  
  function jsCallUrl(carbrandValue, carColorValue){
  
      var pageUrl = "";
  
      switch (carbrandValue){
          case "volvo":
              switch (carColorValue){
              case "white":
                  pageUrl = "volvo-white-page-url.php";
                  break;
              case "black":
                  pageUrl = "volvo-black-page-url.php";
                  break;
           case "red":
                  pageUrl = "volvo-red-page-url.php";
                  break;
           case "blue":
                  pageUrl = "volvo-blue-page-url.php";
              break;            
            }
            break;
          case "saab":
              switch (carColorValue){
              case "white":
                  pageUrl = "saab-white-page-url.php";
                  break;
              case "black":
                  pageUrl = "saab-black-page-url.php";
                  break;
              default:
                  pageUrl = "saab-othercolor-page-url.php";
                  break;
            }
            break;
      }
  
  
  
      if (pageUrl != ""){
        location.href = "https://domain/" + pageUrl;
      }
  }
  </code></pre>