here is my html.
<select id="type">
<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>
here is the jquery i tried but was unsuccessful.
$(document).ready(function() {
if( $("#type").val("item1"))
{
$("#size").html("<option value='test'>test</option><option value="test2">test2</option>);
}
elseif( $("#type").val("item2"))
{
$("#size").html("<option value='anothertest1'>anothertest1</option>");
}
});
basically what i'm trying to do is if an option is selected in #type then the size select is populated with options associated to it. how can i do this?
thanks
This question is related to
jquery
as a complementary answer to @Navid_pdp11, which will enable to select the first visible item and work on document load as well. put the following below your body tag
<script>
$('#mainCat').on('change', function() {
let selected = $(this).val();
$("#expertCat option").each(function(){
let element = $(this) ;
if (element.data("tag") != selected){
element.removeClass('visible');
element.addClass('hidden');
element.hide() ;
}else{
element.removeClass('hidden');
element.addClass('visible');
element.show();
}
});
let expertCat = $('#expertCat');
expertCat.prop('selectedIndex',expertCat.find("option.visible:eq(0)").index());
}).triggerHandler('change');
</script>
Your if statement is setting the value. You want to compare it by doing this
if ($("#type").val() == "item1") {
...
}
daLizard is right though. You want an event handler. document.ready runs only once, when the page DOM is ready to be used.
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();
});
I don't quote understand what you are trying to achieve, but you need an event listener. Something like:
$('#type').change(function() {
alert('Value changed to ' + $(this).attr('value'));
});
This will give you the value of the selected option tag.
you can use data-tag in html5 and do this using this code:
<script>_x000D_
$('#mainCat').on('change', function() {_x000D_
var selected = $(this).val();_x000D_
$("#expertCat option").each(function(item){_x000D_
console.log(selected) ; _x000D_
var element = $(this) ; _x000D_
console.log(element.data("tag")) ; _x000D_
if (element.data("tag") != selected){_x000D_
element.hide() ; _x000D_
}else{_x000D_
element.show();_x000D_
}_x000D_
}) ; _x000D_
_x000D_
$("#expertCat").val($("#expertCat option:visible:first").val());_x000D_
_x000D_
});_x000D_
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>_x000D_
<select id="mainCat">_x000D_
<option value = '1'>navid</option>_x000D_
<option value = '2'>javad</option>_x000D_
<option value = '3'>mamal</option>_x000D_
</select>_x000D_
_x000D_
<select id="expertCat">_x000D_
<option value = '1' data-tag='2'>UI</option>_x000D_
<option value = '2' data-tag='2'>Java Android</option>_x000D_
<option value = '3' data-tag='1'>Web</option>_x000D_
<option value = '3' data-tag='1'>Server</option>_x000D_
<option value = '3' data-tag='3'>Back End</option>_x000D_
<option value = '3' data-tag='3'>.net</option>_x000D_
</select>You can use switch case like this:
$(document).ready(function () {_x000D_
$("#type").change(function () {_x000D_
switch($(this).val()) {_x000D_
case 'item1':_x000D_
$("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");_x000D_
break;_x000D_
case 'item2':_x000D_
$("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");_x000D_
break;_x000D_
case 'item3':_x000D_
$("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");_x000D_
break;_x000D_
default:_x000D_
$("#size").html("<option value=''>--select one--</option>");_x000D_
}_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<select id="type">_x000D_
<option value="item0">--Select an Item--</option>_x000D_
<option value="item1">item1</option>_x000D_
<option value="item2">item2</option>_x000D_
<option value="item3">item3</option>_x000D_
</select>_x000D_
_x000D_
<select id="size">_x000D_
<option value="">-- select one -- </option>_x000D_
</select>Source: Stackoverflow.com