javascript - ドロップダウン メニューで選択したオプションに従って Web ページに動的コンテンツを作成する方法

Question

デフォルトオプションが選択されていないドロップダウンメニューがあるWebページがあります。ユーザーがオプションを選択すると、そのオプションに関連するテキスト ボックスが表示されます。これどうやってするの。たとえば、私はこれらの画像を持っています

Answer 1

これは非常に簡単です。すべてのテキストボックスは非表示になっており、ドロップダウンメニューにイベントがあると、適切なdivが表示されます。

HTML：

<select id='dropdown' onchange='showDiv()'>
    <option>Select</option>
    <option value="div1">Div 1</option>
    <option value="div2">Div 2</option>
</select>

<br /><br />

<div id="div1" style='display: none;'>Div 1</div>
<div id="div2" style='display: none;'>Div 2</div>

JS

<script type="text/javascript">
    function showDiv() {
        var div = document.getElementById("dropdown").value;
        if(document.getElementById(div) != null) {
        hideAllDiv();
            document.getElementById(div).style.display = "block";
    }
    }

    function hideAllDiv() {
        document.getElementById("div1").style.display = "none";
        document.getElementById("div2").style.display = "none";
    }
</script>

上記のコードは見苦しいですが、jqueryといくつかのcssを使用するとより適切に実行できます。

編集 ：

Jqueryの例

<select id='dropdown'>
    <option>Select</option>
    <option value="div1">Div 1</option>
    <option value="div2">Div 2</option>
</select>

<br /><br />

<div class='div' id="div1">Div 1</div>
<div class='div' id="div2">Div 2</div>

<style type="text/css">
    .div { display: none; }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#dropdown").change(function() {
            $(".div").hide();
            $("#" + $(this).val()).show();
        });
    });
</script>

Answer 2

可視性が非表示に設定されている div を使用し、select イベントで可視化します。select イベントに関連付けられた、無神論的な目的で複数の div を使用できます。

例は - の投稿 2 にあります。

http://www.codingforums.com/showthread.php?t=167172

Answer 3

リストボックスにあるオプションの数と、テキストボックスがオプション間で共有されているかどうかによって異なります。

オプションが選択されたときに表示される非表示の DIV を作成できます。ドロップダウンに添付された onChange イベントを使用して起動される JavaScript 関数を作成する必要があります。

テキストボックスを共有していて、Javascript 関数で表示/非表示にできる特定のクラスを指定した場合、jQuery などを使用すると比較的簡単です。

Answer 4

次のように変更された選択のイベント ハンドラーを追加します。

$('#yourSelectId').change(function() {
    var selectedVal = $('#yourSelectId option:selected').attr('value');  
});

次に、選択した値に応じて非表示の div を表示します ( $.('.class').hide() )。