別のドロップダウンメニューからの回答に基づいて表示されるドロップダウンメニューを作成する方法

Question

私は、ユーザーがお互いに基づいて複数の選択を行う必要があるページを作成しようとしています。どのように特定のタイプのドロップダウンメニュー＃2がドロップダウンメニュー＃1のユーザーの選択に基づいて表示されるようなフォームを作成しますか？

たとえば、ユーザーが「製品カテゴリ」と「製品サブカテゴリ」を選択する必要があるとします。ユーザーが最初のドロップダウンメニューから「寝具」を選択すると、「ベッド、マットレス、枕」のような選択肢が2つ目のドロップダウンメニューに自動的に表示されます。

さらにこの例では、ユーザーが「寝具」ではなく「エレクトロニクス」を選択したとします。 2番目のドロップダウンメニューには、「テレビ、mp3プレーヤー、コンピュータ」のような選択肢があります。

このようなことをやり遂げるにはどうすればいいですか？それはあなたがHTML/CSSやその他の形式で行うことですか？

ありがとうございました！

EDIT - 私はDjango/Pythonを使用してこのWebサイトをHTML、CSS、Javascriptと一緒に構築しています。

Answer 1

あなたは、HTMLやJavaScript （JSFIDDLE）の組み合わせを使用することができます。

<select id="opts" onchange="showForm()"> 
    <option value="0">Select Option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 

<div id="f1" style="display:none"> 
    <form name="form1"> 
     <select id="opts" onchange="showForm()"> 
      <option value="0">Select Option</option> 
      <option value="1">Option 1A</option> 
      <option value="2">Option 1B</option> 
     </select> 
    </form> 
</div> 

<div id="f2" style="display:none"> 
    <form name="form2"> 
     <select id="opts" onchange="showForm()"> 
      <option value="0">Select Option</option> 
      <option value="1">Option 2A</option> 
      <option value="2">Option 2B</option> 
     </select> 
    </form> 
</div> 

<script type="text/javascript"> 
    function showForm() { 
     var selopt = document.getElementById("opts").value; 
     if (selopt == 1) { 
      document.getElementById("f1").style.display = "block"; 
      document.getElementById("f2").style.display = "none"; 
     } 
     if (selopt == 2) { 
      document.getElementById("f2").style.display = "block"; 
      document.getElementById("f1").style.display = "none"; 
     } 
     if (selopt == 0) { 
      document.getElementById("f2").style.display = "none"; 
      document.getElementById("f1").style.display = "none"; 
     } 
    } 
</script> 

Answer 2

この気に入りましたか？ jsフィドルを作成しました。 http://jsfiddle.net/wigster/MeTQQ/

これは、ドロップダウンボックスの値をつかみ、そしてそれがルールに一致した場合、その後、それが表示するために、他のドロップダウンボックスを設定し、そうでない場合は、他のドロップダウンボックスが隠されていることを保ちます。行くには2つの方法があります http://jsfiddle.net/exXmJ/

私はそれを参照してください方法：あなたはjQueryのを使用したい場合は

Answer 3

、あなたがこのテストケースを使用することができます。ドロップダウンを削除して新しいものに交換するか、2つの異なるドロップダウンを非表示にする。アレクサンダーは2番目の方法を取り上げたので、私はそれには入っていません。