how to change a selections options based on another select option selected?

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

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>

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

You can use switch case like this:

$(document).ready(function () {
  $("#type").change(function () {
     switch($(this).val()) {
        case 'item1':
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
            break;
        case 'item2':
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
            break;
        case 'item3':
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
            break;
        default:
            $("#size").html("<option value=''>--select one--</option>");
     }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

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.

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.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="index">
<select name="in" onchange="myFunction()">
<option>Select One</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="select">
<option>Select One</option>
</select>
</form>
</body>
</html>
<script>
function myFunction(){
var x=document.index.in.value;
if(x=="One"){
document.getElementById('select').innerHTML="<option>A</option><option>Two</option>";
}
}
</script>

function showDiv(prefix, chooser) {
  var selectedOption = (chooser.options[chooser.selectedIndex].value);
  if (selectedOption == "2") {
    var div = document.getElementById(prefix + "2");
    div.style.display = 'block';
  } else {
    var div = document.getElementById(prefix + "2");
    div.style.display = 'None';
  }
}

<div class="form-label-group">
  <select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control">
    <option value="">How can we help you?</option>
    <option value="2">Support</option>
    <option value="1">Feedback</option>
  </select>
  <div id="div2" style="display:none;">
    <select id="type">
      <option value="item0">--Select--</option>
      <option value="item1">Technical</option>
      <option value="item2">Non-Technical</option>
    </select>
  </div>

</div>