Tengo 2 OPCIONES DE SELECCIÓN diferentes en un formulario.
La primera es Fuente, la segunda es Estado. Me gustaría tener diferentes OPCIONES en mi lista desplegable Estado dependiendo de la OPCIÓN seleccionada en mi desplegable Fuente.
Fuente:
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
Estado:
<select id="status" name="status">
</select>
Opciones:
Mi intento no funciona:
<script>
$(document).ready(function () {
var option = document.getElementById("status").options;
if (document.getElementById('source').value == "MANUAL") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
}
if (document.getElementById('source').value == "ONLINE") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
$("#status").append('<option>SHIPPED</option>');
}
});
</script>
prueba algo como esto... [jsfiddle demo][1]
HTML
Source: <select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option> </select>
Status:
<select id="status" name="status">
<option>OPEN</option>
<option>DELIVERED</option>
</select>
JS
$(document).ready(function() {
$("#source").change(function() {
var el = $(this) ;
if(el.val() === "ONLINE" ) {
$("#status").append("<option>SHIPPED</option>");
}
else if(el.val() === "MANUAL" ) {
$("#status option:last-child").remove() ; }
});
});
En [este jsfiddle][1] encontrarás una solución que he ideado. La idea es tener un par de selectores en html y usar javascript (plano) para filtrar las opciones en el selector dependiente, basado en la opción seleccionada del primero. Por ejemplo:
<select id="continents">
<option value = 0>All</option>
<option value = 1>Asia</option>
<option value = 2>Europe</option>
<option value = 3>Africa</option>
</select>
<select id="selectcountries"></select>
Usos (en el jsFiddle)
MAIN.createRelatedSelector
( document.querySelector('#continents') // from select element
,document.querySelector('#selectcountries') // to select element
,{ // values object
Asia: ['China','Japan','North Korea',
'South Korea','India','Malaysia',
'Uzbekistan'],
Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
}
,function(a,b){return a>b ? 1 : a<b ? -1 : 0;} // sort method
);