Show hide select options based on value in first select

by bartula

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select id="mainCat">
  <option value='country-1'>Country 1</option>
  <option value='country-2'>Country 2</option>
  <option value='country-3'>Country 3</option>
</select>

<select id="expertCat">
  <option value='0' data-tag='0'>Select country</option>
  <option value='1' data-tag='country-2'>City Country 2</option>
  <option value='2' data-tag='country-2'>City Country 2</option>
  <option value='3' data-tag='country-1'>City Country 1</option>
  <option value='3' data-tag='country-1'>City Country 1</option>
  <option value='3' data-tag='country-3'>City Country 3</option>
  <option value='3' data-tag='country-3'>City Country 3</option>
</select>

JavaScript

$('#mainCat').on('change', function() {
	  var selected = $(this).val();
	  $("#expertCat option").each(function(item) {
	    console.log(selected);
	    var element = $(this);
	    console.log(element.data("tag"));
	    if (element.data("tag") != selected) {
	      element.hide();
	    } else {
	      element.show();
	    }
	  });
	  $("#expertCat").val($("#expertCat option:visible:first").val());
	});