【问题标题】:JQuery Get selected value from dynamically generated dropdownJQuery 从动态生成的下拉列表中获取选定的值
【发布时间】:2015-10-20 12:33:47
【问题描述】:

我有一个动态生成的下拉列表

下面是生成的Dropdown的代码sn-p

<select class='selectAggregate'>
  <option>Select</option>
  <option>Min</option>
  <option>All</option>
</select>

如何使用 JQuery 获得 Selected 选项

编辑我添加了我用过的jquery代码

 $('.selectAggregate').each(function()
            {
                var $val = $("option:selected",this).text();                    
        }   

selectAggregate 是动态生成的下拉菜单的类属性

【问题讨论】:

  • 告诉我们你是如何尝试的$('.selectAggregate').val()
  • 'var $val = $("option:selected",this).val(); 使用this'作为当前元素
  • 最好将值属性添加到选项标签然后尝试相同
  • 试过加值也用text()得到
  • $('.class').each(function(){ var $val = $("option:selected",this).val(); }); .class是下拉列表的类值

标签: javascript jquery html drop-down-menu html-select


【解决方案1】:

假设您使用的是“直接”绑定,它只会附加到您的代码进行事件绑定调用时页面上存在的元素。

在动态生成元素或操作选择器(如删除和添加类)时,您需要使用 Event Delegation.on() 委托事件方法。

一般语法

$(document).on('event','selector',callback_function)

例子

$(document).on('change', ".selectAggregate", function(){
    alert($(this).val())
});

你应该使用最近的静态容器来代替document

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素,我们可以使用委托事件将点击事件绑定到动态创建的元素,同时避免频繁附加和删除事件处理程序的需要。

【讨论】:

  • 是的,你明白我的意思:)。但我需要在函数中获取选定的值
  • 这个方法对任何动态生成的 dom 对象仍然不起作用,即使你手动调用了一个 change 事件。您所做的内存更改仍然无法访问。有人有真正可行的解决方案吗?
【解决方案2】:

试试这个

 $("button").click(function(){
        $.each($(".selectAggregate option:selected"), function(){            
           var $val = $(this).text();

        });
    });

【讨论】:

  • 选择没有值 如果发生这种情况,则文本被评估为值。
  • 那么您需要提供您在此处尝试过的代码,以便修复它。
  • 根据您更新的问题编辑了我上面的答案,参考:tutorialrepublic.com/…
【解决方案3】:
$(document).on('change','.selectAggregate', function() {
var temp = $('.selectAggregate').children(":selected").text();
});

这会对你有所帮助,在这里你可以得到动态生成的select的值。 使用 change 事件是因为 select (option) 中的元素是动态生成的。

【讨论】:

  • 不幸的是,这不适用于动态创建的选择元素。除非您使用鼠标进行选择,否则该事件不会触发(如果以编程方式创建选项则不会触发!)。
【解决方案4】:

要获得选定的值,您可以在 js 文件中使用以下语句。

$(".selectAggregate option:selected").val();

【讨论】:

  • 这个答案没有考虑到change的事件
猜你喜欢
  • 2015-12-05
  • 1970-01-01
  • 2020-01-07
  • 2015-09-07
  • 1970-01-01
  • 2022-01-21
  • 2021-12-06
相关资源
最近更新 更多