相关疑难解决方法(0)

这类似于 如何在Bootstrap按钮下拉标题中显示所选项目

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

为了测试上面的内容,我<li>在点击该项目时故意放置静态,我可以在控制台中看到成功消息.但是,当我点击<li>动态附加时,我在控制台中没有得到任何东西.

我相信,我在这里缺少一些jQuery基础知识.jQuery大师,评论/想法？

以下是一些进一步说明的代码.

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 …

这个问题已经在Stackoverflow上被问了几次 - 但是我仍然无法触及它的底部...而且我的查询是投入更多的下拉菜单.所以我有两个下拉菜单和一个搜索.我想从下拉列表和"已选择"中选择以替换下拉占位符文本.但我还需要记住,在点击搜索后,它将查询数据库中的这些选定字段.

            <!-- Search box Start -->
                    <form>
                        <div class="well carousel-search hidden-phone">
                            <div class="btn-group">
                                <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Country<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                    <li><a href="#">Item I</a></li>
                                    <li><a href="#">Item II</a></li>
                                    <li><a href="#">Item III</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Other</a></li>
                                    </ul>
                        </div>

                            <div class="btn-group">
                                <a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region/City<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Item I</a></li>
                                    <li><a href="#">Item II</a></li>
                                    <li><a href="#">Item III</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Other</a></li>
                                    </ul>
                            </div>
                            <div class="btn-group">
                                <button type="submit" class="btn btn-primary">Search</button>
                            </div>

                        </div>
                    </form>
            <!-- Search …

我正在使用引导下拉列表,并且需要将第一个选项作为默认选项.以下不起作用.

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    CHOOSE FEATURE
    <span class="caret"></span>
</button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li selected="selected"><a>Feature 1</a></li>
    <li><a>Feature 2</a></li>
    <li><a>Feature 3</a></li>
    <li><a>Feature 4</a></li>
    <li><a>Feature 5</a></li>
    <li><a>Feature 6</a></li>
</ul>

使用最新的 Bootstrap 3.3.6 和 jQuery 库 1.11.3，当用户选择其中一个选项时，我试图让下拉列表显示选定的值。到目前为止，看起来下拉 ul 根本不会显示。

HTML：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select One
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
    <li><a href="#" data-value="a">A</a></li>
    <li><a href="#" data-value="b">B</a></li>
  </ul>
</div>

JS：

    $(".dropdown-menu li a").click(function() {
      $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
      $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});

我参考了这个线程以获得一个有效的 JS 函数，但无济于事：How to Display Selected Item in Bootstrap Button Dropdown Title

当前 JSFiddle：https ://jsfiddle.net/9xzqdry9/