Javascript 使用jquery隐藏和显示未工作的div元素

我有一个woocommerce产品页面-这里是链接-

这是一个woocommerce产品页面

在该页面中，当我更改名为“拾取你的层压板”的选择菜单时，我试图隐藏并显示一个div标记

这是我使用的代码- 请注意，“拾取层压板”是“选择”标记的id

<script type="text/javascript">
$(document).ready(function(){
    $("#pick-your-laminate").change(function(){
        if($(this).children("option").attr(":selected")=="Plain Laminate"){
            $(".box").not(".plain").hide();
            $(".plain").show();
        }
        if($(this).children("option").attr(":selected")=="Digital Laminate"){
            $(".box").not(".digital").hide();
            $(".digital").show();
        }
    });
});
</script>

这不起作用。我的意思是，当我改变选择菜单选项时，什么也没发生。因此，我使代码更加简单，我只是想在更改下拉菜单时显示一个警报框。这是新的代码-

<script type="text/javascript">
$(document).ready(function(){
    $("#pick-your-laminate").change(function(){
       alert( "Handler for .change() called." );
    });
});
</script>

还是什么都没发生

发生了什么事？你们能找到问题所在吗

您可以通过检查代码所在的网页来验证，这太好了

试试这个：

---

根据斯宾塞·维佐雷克（Spencer Wieczorek）和姆普隆詹（mplungjan）的说法，我做了一些改变。我所做的是在javascript中使用settimeout函数使用了一些延迟，jquery代码也需要更改

现在它正在工作。您可以查看以下链接-

我认为这不是一个优雅的解决方案。

---

你们知道我为什么要推迟吗？是否有另一段代码

这不是Wordpress的正确DOM就绪处理程序，您必须使用jQuerydocument.readyfunction${…@mplungjan-为什么？@mplungjan-Wordpress默认处于无冲突模式？@mplungjan是的，因为$id.val将在这里工作，这是应该使用的。在这个问题中，这是因为选项没有值属性。@mplungjan-太好了，现在解释一下为什么第二个代码段中只有警报不工作，并在OP的站点中使用它's even$'select'.change…，但仍然不会触发警报。不，问题是他们需要使用$this.val来获取所选项目。除非他们在其中一个选项中明确定义了所选属性，否则将无法定义该属性。

$("body").on('change', '#pick-your-laminate', function(){
    if($(this).children("option").attr(":selected")=="Plain Laminate"){
        $(".box").not(".plain").hide();
        $(".plain").show();
    }
    if($(this).children("option").attr(":selected")=="Digital Laminate"){
        $(".box").not(".digital").hide();
        $(".digital").show();
    }
});

<script type="text/javascript">
        $(document).ready(function(){
            setTimeout(function(){ 
                $("#pick-your-laminate").on('change', function(){
                    if ( this.value == "Plain Laminate" ) {
                        $(".box").not(".plain").hide();
                        $(".plain").show();
                    } else if ( this.value == "Digital Laminate" ) {
                        $(".box").not(".digital").hide();
                        $(".digital").show();
                    }
                });
            }, 3000);
        });
    </script>