根据选择框更改 DIV 可见性

Changing DIV visibility based on select box

本文关键字：DIV 可见性 选择      更新时间：2023-09-26

我有一个div，只有在从下拉菜单中选择某个值时才想显示(在这种情况下，它是custom-css(

在小提琴(http://jsfiddle.net/obmerk99/8xnzh/1/(上它工作正常...

jQuery(document).ready(function() {
       jQuery("#k99-custom-1").change(function () {
         jQuery("#k99-custom-1 option:selected").each(function ()
        {
            if( jQuery(this).attr("value") == "custom-css")
            {
                jQuery("#customcss").show();
            }
            else
            {
                jQuery("#customcss").hide();
            }
        });
    }).change();
});

但是在真实页面中，选择下拉列表实际上是使用"添加选项"按钮动态生成的，因此某些(第一个(选择在页面加载(文档就绪(时不存在，我认为这就是它不起作用的原因。

在这里查看完整的操作(不起作用(：http://jsfiddle.net/obmerk99/ZcAzy/1/

如果选择了"custom-css"值，为了显示div，我做错了什么？(现在它设置为仅适用于第一个(或第二个( - 但让它与所有添加的选择列表一起使用会很棒.. (

尝试使用 delegation ，如下所示：

jQuery(function() {
    //  Here, `.on` is used in its `delegate` form, where it asigns an event to any
    //    element matching the selector
    //    regardless when it was added to the DOM
    jQuery(document).on('change', "[id^='k99-custom-']", function(e) {
        jQuery("[id^='k99-custom-'] option:selected").each(function(i) {
            if (jQuery(this).attr("value") == "custom-css") {
                jQuery("#customcss").show();
            }
            else {
                jQuery("#customcss").hide();
            }
        });
    })
})

我刚刚在对另一个答案的评论中注意到，您尝试了这样的事情。您做错的是将选择器[id^='k99-custom-'] event委托给[id^='k99-custom-']，如您所见，它本身就是它自己。要委派，您需要分配给父元素或document本身，如我的示例所示。最常见的用途是简单地使用$(document).on(...

例

了解更多关于.delegate及其.on形式的信息！

您需要

使用 on 函数而不是仅change来绑定到动态元素。 

$('body').on('change','#k99-custom-1',function(){
  //function here
});
相关文章：