양식에 2개의 서로 다른 선택 옵션이 있습니다.
첫 번째는 소스이고 두 번째는 상태입니다. 소스 드롭다운에서 선택한 옵션에 따라 상태 드롭다운 목록에 다른 옵션을 표시하고 싶습니다.
Source:
<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로 선택기 쌍을 만들고 (일반) 자바스크립트를 사용하여 첫 번째 선택기에 선택된 옵션에 따라 종속 선택기의 옵션을 필터링하는 것입니다. 예를 들어
<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
);