如何在引导下拉列表中获取选定元素，其中下拉列表是动态填充的

Posted 2023-03-05

【中文标题】如何在引导下拉列表中获取选定元素，其中下拉列表是动态填充的

【英文标题】：How to get Selected element in bootstrap dropdown, where dropdown is dynamically populated

【发布时间】：2013-04-05 10:52:19

【问题描述】：

这类似于 How to Display Selected Item in Bootstrap Button Dropdown Title

唯一不同的是，我的下拉列表不是静态的，而是通过 ajax 响应填充的。 下面的代码不适用于 <li> 动态填充的项目。

为了测试上面的内容，当我点击那个项目时，我故意放了一个静态的<li>，我可以在控制台中看到成功消息。但是，当我点击动态附加的<li> 时，我在控制台中什么也得不到。

我相信，这里缺少一些 jQuery 基础知识。 jQuery 大师、cmets/想法？

这里有一些代码可以进一步说明。

Java 脚本代码：

在控制台打印选择的选项

$(".dropdown-menu li a").click(function () 
        console.log("Selected Option:"+$(this).text());
);

从 ajax JSON 响应填充下拉列表

$.each(response, function (key, value) 
    $("#dropDownUL").append("<li> <a tabindex=\"-1\" href=\"#\" align=\"left\"> " + value + "</a> </li>");
)

html 代码：

<div class="dropdown btn">
    <div id="dropDownId" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#">
        Collections
        <b class="caret"></b>
    </div>           
    <ul id="dropDownUL"  class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#" align="left">Static test Option</a></li>
    </ul>


</div>

所以，再一次，如果我点击Static test Option，我可以在控制台中看到消息：Selected Option: Static test Option

但是，当我点击由 ajax 响应填充的 Option2 Option 3 时，我在控制台中看不到任何内容。

如果有什么不清楚的地方请告诉我。我会尝试进一步解释。

【参考方案1】：

$(document).on('click', '.dropdown-menu li a', function () 
    console.log("Selected Option:"+$(this).text());
);

这只是简单的事件委托...页面加载时不存在的元素必须将事件委托给页面加载时确实存在的静态父元素。

我们利用 jQuery 的 .on() 来完成这项工作。

  $(staticElement).on(event, dynamicElement, function() //etc );

强制编辑

请不要将元素实际绑定到$(document)，而是选择最接近的静态父元素。这是出于性能原因。