根据选择框更改 DIV 可见性

Posted 2023-02-21

【中文标题】根据选择框更改 DIV 可见性

【英文标题】：Changing DIV visibility based on select box

【发布时间】：2013-06-30 08:44:12

【问题描述】：

我有一个 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，我做错了什么？ （现在它设置为仅适用于第一个（或第二个） - 但让它适用于所有添加的选择列表会很棒..）

【问题讨论】：

大声笑，当你选择它时我正在更新答案，希望对你有帮助

【参考方案1】：

尝试使用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(...

Example

详细了解.delegate 及其.on 形式！

【讨论】：

很棒的信息.. 它就像一个魅力。我的 JS 技能是

【参考方案2】：

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

$('body').on('change','#k99-custom-1',function()
  //function here
);

【讨论】：

谢谢，看起来很合乎逻辑，但不知何故它不起作用，也许我做错了什么..jsfiddle.net/obmerk99/ZcAzy/2