Question

我有一个下拉菜单。如果用户从下拉菜单中选择任何选项，则脚本会显示包含其他信息的相应div。

例如，如果用户选择选项2 ，则脚本会显示 div“inf2”。

到目前为止没问题，但在相同情况下，页面将在下拉菜单中加载已选择的选项。如果在页面加载时已经选择了任何选项，我需要一些方法强制脚本显示适当的div。

$(".addinf").hide();
$("#privacy").change(function() {
    switch ($(this).val()) {
        case "0":
            $(".addinf").hide().parent().find("#inf0").show();
            break;
        case "1":
            $(".addinf").hide().parent().find("#inf1").show();
            break;
        case "2":
            $(".addinf").hide().parent().find("#inf2").show();
            break;
    }
});

<select id="privacy" name="privacy">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

<div id="inf0" class="addinf">Info 0</div>
<div id="inf1" class="addinf">Info 1</div>
<div id="inf2" class="addinf">Info2</div>

Answer 1

如果菜单已经可见，则可以将其设置为隐藏。

试试这个：

#inf0, #inf1, #inf2 {
  display: none;
}

这样，它们将在开始时隐藏，一旦用户选择了某些内容，它们就会被显示出来！

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/LCTZ7/

<强> JS： -

$(".addinf").hide();

$("#privacy").change(function () {
    switch ($(this).val()) {
        case "0":
            $(".addinf").hide().parent().find("#inf0").show();
            break;
        case "1":
            $(".addinf").hide().parent().find("#inf1").show();
            break;
        case "2":
            $(".addinf").hide().parent().find("#inf2").show();
            break;
    }
});

$("#privacy").change();

Answer 3

只需在页面加载时触发change事件

$(".addinf").hide();
$("#privacy").change(function () {
    switch ($(this).val()) {
        case "0":
            $(".addinf").hide().parent().find("#inf0").show();
            break;
        case "1":
            $(".addinf").hide().parent().find("#inf1").show();
            break;
        case "2":
            $(".addinf").hide().parent().find("#inf2").show();
            break;
    }
}).trigger('change');

JQuery（.show .hide）

3 个答案:

试试这个： - http://jsfiddle.net/adiioo7/LCTZ7/