あるフォームに2つの異なるSELECT OPTIONがあります。
1つ目はソース、2つ目はステータスです。ソースのドロップダウンで選択されたOPTIONに応じて、ステータスのドロップダウンリストに異なるOPTIONを持たせたいと思います。
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内にセレクタのペアを持ち、(プレーン)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
);