1

jQuery について 1 つ質問があります。ユーザーがhtmlで値「0」の「Presmerovanie」を選択した場合、ID「typ」で選択すると、ID「pres」のdivが表示されます。コードは次のとおりです。

<dl>
    <dt><label for="typ">Typ</label></dt>
    <dd>
    <select id="typ" size="1">
        <option value="1">Normálna</option>
        <option value="0">Presmerovanie</option>
    </select>
    </dd>
</dl>
<!-- Len ak je presmerovatelna -->
<div id="pres" style="display: none;">
    <dl>
        <dt><label for="presmerovat">Presmerovat na</label></dt>
        <dd>
        <select id="presmerovat" size="1">
            <option>Category 1</option>
            <option>Category 2</option>
        </select>
        </dd>
    </dl>
</div>
<!-- Koniec ak je presmerovatelna -->

出来ますか？

4

2 に答える 2

5 
$("#typ").on("change", function() {
    $("#pres").hide();

    if ( $(this).val() == '0' ) {
        $("#pres").show();
    } 
});​

デモ

于 2012-07-02T14:26:04.027 に答える
0

柔軟にするために、ドロップダウン項目にデータ属性を追加できます。

<select id="typ" size="1">
    <option value="1" data-rel="norm">Normálna</option>
    <option value="0" data-rel="pres">Presmerovanie</option>
</select>

change次に、イベントをバインドして選択を処理します。

$(document).ready(function() {
    $("#typ").on("change", function() {
        $(this).find("option").each(function() {
            var rel = $(this).data("rel"); 
            if (rel && rel.length > 0) {
                var obj = $("#" + rel);
                if ($(this).is(":selected"))
                    obj.show();
                else
                    obj.hide();
            }
        });
    });

    //show initial item:
    $("#typ").change();
});​

これにより、選択したアイテムの関連要素のみが表示され、他の要素はすべて非表示になります。

ライブ テスト ケース。

于 2012-07-02T14:37:34.217 に答える