how to change a selections options based on another select option selected?
Here is my simple solution using Jquery filters.
$('#publisher').on('change', function(e) {
let selector = $(this).val();
$("#site > option").hide();
$("#site > option").filter(function(){return $(this).data('pub') == selector}).show();
});
JSFIDDLE
Here is an example of what you are trying to do => fiddle
$(document).ready(function () {
$("#type").change(function () {
var val = $(this).val();
if (val == "item1") {
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
} else if (val == "item2") {
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
} else if (val == "item3") {
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
} else if (val == "item0") {
$("#size").html("<option value=''>--select one--</option>");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
<option value="item0">--Select an Item--</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
<select id="size">
<option value="">-- select one -- </option>
</select>you can use data-tag in html5 and do this using this code:
<script>
$('#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());
});
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<select id="mainCat">
<option value = '1'>navid</option>
<option value = '2'>javad</option>
<option value = '3'>mamal</option>
</select>
<select id="expertCat">
<option value = '1' data-tag='2'>UI</option>
<option value = '2' data-tag='2'>Java Android</option>
<option value = '3' data-tag='1'>Web</option>
<option value = '3' data-tag='1'>Server</option>
<option value = '3' data-tag='3'>Back End</option>
<option value = '3' data-tag='3'>.net</option>
</select>