Question

我有一个关于jQuery的问题。如果用户在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 -->

有可能吗？

Answer 1

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

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

demo

Answer 2

为了使其灵活，您可以向下拉项添加数据属性：

<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();
});

这将仅显示所选项目的相关元素并隐藏所有其他元素。

Live test case

关于select show div的jQuery

2 个答案: