我在一个表单中有 2 个不同的 SELECT OPTION。
第一个是来源,第二个是状态。我想在状态下拉列表中根据在来源下拉列表中选择的选项设置不同的选项。
来源:
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
状态:
<select id="status" name="status">
</select>
选项:
我无法工作的尝试:
<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>
试着这样做... [jsfiddle 演示][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() ; }
});
});
在[这个 jsfiddle][1]中,你会找到我设计的一个解决方案。我们的想法是在 html 中设置一对选择器,然后根据第一个选择器的所选选项,使用(纯)javascript 过滤从属选择器中的选项。例如
<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>
使用(在 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
);