Search code examples
javascriptjqueryhtmlcssmixitup

Hide options in a select list using mixitup.js and jQuery

I'm using mixitup.js to filter cities by country. I want to hide and show cities by the selected country.

Filtering works fine, but is there some way to show only cities that are included in certain country? This is what I'm working on: Codepen

I found this Fiddle but I don't know how to use it if I have more than two select boxes. E.g. Country > City > Province

Solution

  • You can do something like this 

    $('#country').change(function(){ // when you change a country
  var country = $(this).val(); // example: .usa OR .france OR .sweden
  $('#city > option').show(); // show all the cities
  if(country){ // if the value is not ""
    $('#city > option[data-country!="'+country+'"]').hide(); // hide the cities of other countries
  }
});

    For this to work you need to add a reference of country name in the city dropdown, like this 

    <select id="country">
  <option value="">Country</option>
  <option value=".usa">USA</option>
  <option value=".sweden">Sweden</option>
  <option value=".france">France</option>
</select>

<select id="city">
  <option value="" data-country=".">City</option>
  <option value=".la" data-country=".usa">LA</option>
  <option value=".ny" data-country=".usa">NY</option>
  <option value=".stockholm" data-country=".sweden">Stockholm</option>
  <option value=".gothenburg" data-country=".sweden">Gothenburg</option>
  <option value=".paris" data-country=".france">Paris</option>
  <option value=".cannes" data-country=".france">Cannes</option>
</select>

    Here is a demo http://codepen.io/anon/pen/QbEYLb