Replace 'value' with 'data-filter' in example

Question

guys, here is an example of dependent select options.

 $('#city').change(function() { $('#street option').hide(); $('#street option[value="' + $(this).val() + '"]').show(); // add this code to select 1'st of streets automaticaly // when city changed if ($('#street option[value="' + $(this).val() + '"]').length) { $('#street option[value="' + $(this).val() + '"]').first().prop('selected', true); } // in case if there's no corresponding street: // reset select element else { $('#street').val(''); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="city" name="city"> <option value="0">Select City</option> <option value="1">Manchester</option> <option value="2">Leicester</option> <option value="3">Londra</option> </select> <select id="street" name="street"> <option value="0">Select Street</option> <option value="1">Street 1</option> <option value="1">Street 2</option> <option value="1">Street 3</option> <option value="2">Street 4</option> <option value="2">Street 5</option> <option value="2">Street 6</option> <option value="1200">Street 7</option> <option value="1200">Street 8</option> <option value="1200">Street 9</option> </select> 

Everything is fine with, but in need to replace value-based filtering with data attributes based, like so:

<option value="1">Street 1</option>  =>  <option data-filter="1" value="">Street 1</option>

Your help is a highly appreciated.

Answer 1

Your need to use

$(this).find(":selected").attr('data-filter')

and

$(this).find(":selected").attr('data-filter') + '"]').first().prop('selected', true);

So instead of targeting the 'value' attribute you switch to the 'data-attributeName'.

Update: Here is a working example based on your pen.

Answer 2

Is that what you wish?
To use data-filter instead of value ?

Ok, the twist here is that you have to look for the selected option ... Since the value isn't tied to the select anymore. That's all.

 $('#city').change(function() { var cityFilter = $(this).find("option:selected").data("filter"); $('#street option').hide(); $('#street option[data-filter="' + cityFilter + '"]').show(); // add this code to select 1'st of streets automaticaly // when city changed if ($('#street option[data-filter="' + cityFilter + '"]').length) { $('#street option[data-filter="' + cityFilter + '"]').first().prop('selected', true); } // in case if there's no corresponding street: // reset select element else { $('#street').val(''); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="city" name="city"> <option value="" data-filter="0">Select City</option> <option value="" data-filter="1">Manchester</option> <option value="" data-filter="2">Leicester</option> <option value="" data-filter="3">Londra</option> </select> <select id="street" name="street"> <option value="" data-filter="0">Select Street</option> <option value="" data-filter="1">Street 1</option> <option value="" data-filter="1">Street 2</option> <option value="" data-filter="1">Street 3</option> <option value="" data-filter="2">Street 4</option> <option value="" data-filter="2">Street 5</option> <option value="" data-filter="2">Street 6</option> <option value="" data-filter="1200">Street 7</option> <option value="" data-filter="1200">Street 8</option> <option value="" data-filter="1200">Street 9</option> </select> 

I also "reduced" the amount of jQuery lookups... using the cityFilter variable.

Feel free for questions. ;)