7

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

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

この例をさらに進めるために、ユーザーが「寝具」ではなく「電子機器」を選択したとします。次に、2 番目のドロップダウン メニューには、「テレビ、mp3 プレーヤー、コンピューター」などの選択肢があります。

どうやってそのようなことをするつもりですか？HTML/CSS またはその他の形式で行うことはありますか?

助けてくれてありがとう！

編集 - Django / Python を使用して、HTML、CSS、および Javascript と共にこの Web サイトを構築しています。

4

3 に答える 3

7

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>
于 2012-08-02T23:35:44.027 に答える
3

このような？jsフィドルを作成しました。 http://jsfiddle.net/wigster/MeTQQ/

ドロップダウンボックスの値を取得し、ルールに一致する場合は、他のドロップダウンボックスを表示するように設定し、一致しない場合は、他のドロップダウンボックスを非表示にします。

于 2012-08-02T23:36:14.407 に答える
1

jQueryを使用する場合は、次のテストケースを使用できます：http： //jsfiddle.net/exXmJ/

私の見方には2つの方法があります。ドロップダウンを削除して新しいものと交換するか、2つの異なるドロップダウンを表示/非表示にします。アレクサンダーは2番目の方法をカバーしたので、私はそれには入りません。

于 2012-08-02T23:42:28.510 に答える