title: How to filter the values in the dropdowns when all the dropdown are linked to each other?
body: <p>I have three drop downs. For Country, Region/State and City as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/dQzW8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dQzW8.png" alt="enter image description here"></a></p>
  
  <p>Following is the markup:</p>
  
  <pre><code>            &lt;div class="form-group"&gt; 
                  &lt;label for="country"&gt;Country&lt;/label&gt;
                  &lt;select class="form-control" id="country"&gt;
  
                  &lt;/select&gt;               
              &lt;/div&gt;
              &lt;div class="form-group"&gt; 
                  &lt;label for="region"&gt;Region&lt;/label&gt;
                  &lt;select class="form-control" id="region"&gt;
  
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt; 
                  &lt;label for="city"&gt;City&lt;/label&gt;
                  &lt;select class="form-control" id="city"&gt;
  
                  &lt;/select&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>On selecting a value in any of the three drop down the available options inside the other two drop downs needs to be filtered depending upon the selected value in all the three dropdowns at any point of time. 
  Please note: I am using jQuery.</p>
  
  <p>So far i have done this for filtering on the basis of the only the one changed dropdown value instead of considering all and also it filters value when user goes Country to--> Region to--> City. How to consider the values in other dropdown as well as filter the values here if user goes bottom to up say City --> Region --> Country as well ?</p>
  
  <pre><code>$("#country").on('change', function(){
  
      var selectedCntry = $("#country option:selected").val();
  
      console.log(selectedCntry);
      var ddRegions = [];
      var ddCities = [];
  
      $.each(ddVals, function(i,val){
          if( val.country == selectedCntry){
              ddRegions.push(val.region);
              ddCities.push(val.city);
          }
      });
  
      if(ddRegions.length &gt; 0){
              var regions = "&lt;option value='none'&gt;    Select Region &lt;/option&gt;";
              $.each(ddRegions, function(i,val){
  
                  regions += "&lt;option value="+"'"+val+"'"+"&gt;"+val+"&lt;/option&gt;";
  
              });
  
              $("#region").html(regions);
      }
  
      if(ddCities.length &gt; 0){
           var cities = "&lt;option value='none'&gt;    Select City &lt;/option&gt;";
           $.each(ddCities, function(i,val){
               cities += "&lt;option value="+"'"+val+"'"+"&gt;"+val+"&lt;/option&gt;";
  
           });
          $("#city").html(cities);
      }
  
  
  });
  
  $("#region").on("change",function(){
      var selectedReg = $("#region option:selected").val();
      console.log(selectedReg);
  
      var ddRegionBasedCity = [];
  
      $.each(ddVals, function(i,val){
          if( val.region == selectedReg){
  
              ddRegionBasedCity.push(val.city);
          }
      });
  
      if(ddRegionBasedCity.length &gt; 0){
           var cities = "&lt;option value='none'&gt;    Select City &lt;/option&gt;";
           $.each(ddRegionBasedCity, function(i,val){
               cities += "&lt;option value="+"'"+val+"'"+"&gt;"+val+"&lt;/option&gt;";
  
           });
          $("#city").html(cities);
      }
  
  
  });
  </code></pre>
  
  <p>Here "ddVals" is a variable having an array with json object from which i am filtering the values to be as options in dropdowns. The array looks like as follows:</p>
  
  <pre><code>[{
      "city": "Houston",
      "country": "United States",
      "region": "Texas"
  }, {
      "city": "Oegstgeest",
      "country": "Netherlands ",
      "region": "South Holland"
  }, {
      "city": "Houston",
      "country": "United States",
      "region": "Texas"
  }, {
      "city": "Wellington",
      "country": "New Zealand ",
      "region": "-"
  }, {
      "city": "London",
      "country": "United Kingdom",
      "region": "Great Britain"
  }, {
      "city": "Federal Way",
      "country": "United States",
      "region": "Washington"
  }, {
      "city": "Armonk",
      "country": "United States",
      "region": "New York"
  }, {
      "city": "San Ramon",
      "country": "United States",
      "region": "California"
  }, {
      "city": "New York City",
      "country": "United States",
      "region": "New York"
  }, {
      "city": "Roseland",
      "country": "United States",
      "region": "New Jersey"
  }]
  </code></pre>