cómo cambiar las opciones de selección en función de otra opción de selección seleccionada?

Question

aquí está mi 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> 

aquí está el jquery que probé pero no tuvo éxito.

$(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>"); 
} 

}); 

básicamente lo que estoy tratando de hacer es si se selecciona una opción en #TYPE entonces el tamaño de selección se rellena con opciones asociadas a la misma. ¿Cómo puedo hacer esto?

gracias

Answer 1

He aquí un ejemplo de lo que estamos tratando de hacer:

http://jsfiddle.net/YPsqQ/

$(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>

Answer 2

Tu si declaración es establecer el valor. Desea compararlo haciendo esto

if ($("#type").val() == "item1") { 
... 
} 

daLizard es correcto sin embargo. Quieres un controlador de eventos. document.ready se ejecuta solo una vez, cuando la página DOM está lista para ser utilizada.

Answer 3

No cito lo que intentas lograr, pero necesitas un oyente de eventos. Algo como:

$('#type').change(function() { 
    alert('Value changed to ' + $(this).attr('value')); 
}); 

Esto le dará el valor de la etiqueta de opción seleccionada.

Answer 4

puede utilizar datos en etiquetas en HTML5 y hace esto usando este código:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<select id="mainCat"> 
 
\t \t \t <option value = '1'>navid</option> 
 
\t \t \t <option value = '2'>javad</option> 
 
\t \t \t <option value = '3'>mamal</option> 
 
\t \t </select> 
 
\t \t 
 
\t \t <select id="expertCat"> 
 
\t \t \t <option value = '1' data-tag='2'>UI</option> 
 
\t \t \t <option value = '2' data-tag='2'>Java Android</option> 
 
\t \t \t <option value = '3' data-tag='1'>Web</option> 
 
\t \t \t <option value = '3' data-tag='1'>Server</option> 
 
\t \t \t <option value = '3' data-tag='3'>Back End</option> 
 
\t \t \t <option value = '3' data-tag='3'>.net</option> 
 
\t \t </select>