他のドロップダウンボックスで選択されたオプションに依存するドロップダウンボックス

あるフォームに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>

オプションです。

  • ソースがMANUALの場合、StatusはOPENまたはDELIVERED
  • SourceがONLINEの場合、StatusはOPENまたはDELIVEREDまたはSHIPPEDとなります。

私の動かない試み

            <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>
samyb8
編集された質問 1日 11月 2013 в 2:43
プログラミング
javascript html forms jquery drop-down-menu
1日 11月 2013 в 2:22
1ビュー
ソリューション

こんな感じで試してみてはいかがでしょうか。 [jsfiddleのデモ][1].

HTMLの場合


 Source:   <select id="source" name="source">
     MANUAL
     ONLINE 
    OPEN
      DELIVERED
解説 (0)

このjsfiddle**][1]では、私が考案した解決策が紹介されています。アイデアとしては、html内にセレクタのペアを持ち、（プレーン）javascriptを使って、最初のセレクタで選択されたオプションに基づいて、依存するセレクタのオプションをフィルタリングすることです。例えば、以下のようになります。


<select id="continents">
 All   
 Asia
 Europe
 Africa
解説 (2)

2つの「選択」を作り、片方を表示し、もう片方を隠すようにした方が良いでしょう。

その方が簡単ですし、あなたの方法でselectsにoptionsを追加してもIE8では動作しません（気になるなら）。

解説 (0)