Question

您好我写了一些代码来隐藏并根据所选的下拉选项显示一些代码。这是我的代码：

(function ($){$(document).ready(function() {
    $( '#Drodown_id' ).change(function(){       
        switch ($(this).val()) {
        case "option_1" :
          $("#div1").show();
          $('#div2').hide();
          break;
        case "option_2":
          $("#"div2").show();
          $("#div1").hide();
          break;
        case "option_3":
          $("#"div2").show();
          $("#div1").show);
          break;
        case "":
          $("#div1").hide();
          $("#div2").hide();
          break;
         }
      }); });})(jQuery);

但是，每次打开/刷新页面时，无论选择的选项是option_1，option_2还是null，都会显示div1和div2。仅当页面为新/刷新时才会出现此问题。

我的代码有问题吗？

Answer 1

设置

#div1, #div2{display: none;}

在你的CSS中

。这将隐藏页面加载时的两个元素，更改事件将触发要显示的正确元素。

Answer 2

通过css将div设置为

display:none;

通过css或内联（css更好）。

另外，如果你真的需要添加单独的字符串，你应该使用javascript连接符，即：$('#'div2) should be $（'＃'+'div2'）但你真的可以像你已经做过$('#div2')

一样

Answer 3

那么，除了随机的“和丢失（代码中的代码（严肃地说，检查你的代码）”），你在css中给出div的显示模式是什么？

加载页面时，不会触发下拉菜单的chage-event，因为用户尚未更改。所以你必须在css中将显示设置为“none”，因为你不想在加载时看到div。

Answer 4

在更改#Drodown_id对象之前，您的代码不会激活（因为您使用了jQuery函数更改）。因此，当页面加载时，您不想对要隐藏/显示的对象进行任何操作。尝试使用CSS隐藏＃div1和＃div2：

#div1, #div2 { display:none; }

Answer 5

首先，代码中有几个额外的双引号会阻止它工作。其次，您只是告诉此代码在select更改时执行。试试这个：

$(document).ready(function() {
    setOptions(); // on load
    $('#Drodown_id').change(setOptions); // on change

    function setOptions() {       
        switch ($("#Drodown_id").val()) {
            case "option_1" :
                $("#div1").show();
                $('#div2').hide();
                break;
            case "option_2":
                $("#div1").hide();
                $("#div2").show();
                break;
            case "option_3":
                $("#div1").show();
                $("#div2").show();
                break;
            case "":
                $("#div1").hide();
                $("#div2").hide();
                break;
            }
    }); 
})

jQuery显示和隐藏基于下拉选项 - 初始值问题

5 个答案: