Ich habe 2 verschiedene SELECT OPTION in einem Formular.
Die erste ist Quelle, die zweite ist Status. Ich möchte in der Dropdown-Liste "Status" je nach der in der Dropdown-Liste "Quelle" ausgewählten Option unterschiedliche OPTIONEN haben.
Quelle:
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
Status:
<select id="status" name="status">
</select>
Optionen:
Mein nicht funktionierender Versuch:
<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>
Versuchen Sie etwas wie dies... [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() ; }
});
});
In [diesem jsfiddle][1] finden Sie eine Lösung, die ich entwickelt habe. Die Idee ist, ein Selektorpaar in HTML zu haben und (einfach) Javascript zu verwenden, um die Optionen im abhängigen Selektor zu filtern, basierend auf der ausgewählten Option des ersten. Zum Beispiel:
<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>
Verwendet (im 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
);
Es ist besser, zwei "Auswahlen" zu treffen und die eine anzuzeigen und die andere auszublenden.
Es ist einfacher, und das Hinzufügen von "Optionen" zu "Auswahlen" mit deiner Methode wird im IE8 nicht funktionieren (falls es dich interessiert).