根据选择框更改DIV可见性 [英] Changing DIV visibility based on select box

问题描述

我有一个div，只有当从下拉菜单中选择某个值（在这种情况下，它是 custom-css ） p>

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

  jQuery（document）.ready （）{
 
 jQuery（＃k99-custom-1）。change（function（）{
 jQuery（＃k99-custom-1 option：selected function（）
 {
 if（jQuery（this）.attr（value）==custom-css）
 {
 jQuery（＃customcss）。 show（）; 
} 
 else 
 {
 jQuery（＃customcss）hide（）; 
} 
}）; 
））。change（）; 
}）; 
  

但在实际页面中，选择下拉列表实际上是通过添加选项按钮动态生成的，所以在页面加载（文档就绪）时，确定（第一个）选择不存在，我认为这是它不起作用的原因。

全部在这里（不工作）： http://jsfiddle.net/obmerk99/ZcAzy/1/

如果选择了custom-css值，我该怎么做错误呢？ （现在它只能与第一个（或第二个）一起工作 - 但是它将会很好地与所有添加的选择列表一起使用。）

解决方案

尝试使用委派，如下所示：

 code> jQuery（function（）{
 //这里，`.on`用于它的delegate形式，它将一个事件指定给任何
 //元素匹配选择器
 //不管何时被添加到DOM 
 jQuery（document）.on（'change'，[id ^ ='k99-custom-']，function（e）{$ b $每个（function（i）{
 if（jQuery（this）.attr（value）==custom- css）{
 jQuery（＃customcss）。show（）; 
} 
 else {
 jQuery（＃customcss）hide（）; 
 
}）; 
}）
}）
  

我刚刚注意到另一个答案的评论，你尝试了一下这样的道德。你做错了是将选择器 [id ^ ='k99-custom - '] 的事件委托给 [id ^ ='k99-custom - '] ，您可以看到，它本身就是。要进行委托，您需要像我的例子中的父元素或$ code>文档一样。最常见的用法是简单地使用 $（document）.on（...

示例

了解有关 .delegate 和 .on 的形式！

I have a div that I want to show only if a certain value is selected from a drop down menu ( in this case , it is custom-css )

On the fiddle ( http://jsfiddle.net/obmerk99/8xnzh/1/ ) it works ok...

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();
});

but in the real page , the select drop down is actually generated dynamically with an "add option" button , so that certain (first) select does not exists on page load (document ready ) and I think that this is the reason that it does not work ..

see the full one here in action ( not working ) : http://jsfiddle.net/obmerk99/ZcAzy/1/

What am i doing wrong in order to have the div shown if the "custom-css" value is selected ? ( now it is set to work only with the first one ( or second ) - but it would be great to make it work with all of the added select lists .. )

解决方案

Try using delegation, like so:

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();
            }
        });
    })
})

I just noticed in a comment on another answer, you tried something like this. What you did wrong was to delegate the event of selector [id^='k99-custom-'] to [id^='k99-custom-'], which, as you can see, is itself. To delegate, you need to asign to either a parent element or the document itself, as in my example. The most common use is simply to use $(document).on(...

Example

Learn more about .delegate and the .on form of it!

这篇关于根据选择框更改DIV可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！