Question

我正在尝试在下拉列表中选择html。我正在使用Bootstrap下拉列表如何获得此功能？

我需要在span中显示所选值，我该怎么做？

HTML

<ul class="dropdown-menu status_change" role="menu" style="position: relative;">
    <li><a href="#">Waiting</a></li>
    <li><a href="#">Approved</a></li>
    <li><a href="#">Denied</a></li>    
    <li><a href="#">Frozen</a></li>
    <li><a href="#">Expired</a></li>
  </ul>

的jQuery

$('.status_change').click(function(){
    alert($(this).find('a').html());
});

Answer 1

将处理程序注册到li元素

$('.status_change.dropdown-menu li').click(function () {
    alert($(this).find('a').html());
});

演示：Fiddle

在您的情况下this引用处理程序中的ul元素，因此$(this).find('a')将返回第一个li的内容

更新

将您的标记更改为

<span data-toggle="dropdown" aria-expanded="false" class="btn btn-primary btn-xs dropdown-toggle status_change"><span class="status">Frozen</span><span class="caret fiveML"></span></span>

然后

$('.status_change.dropdown-menu li').click(function () {
    $('.status_change.dropdown-toggle span.status').html($(this).find('a').html())
});

演示：Fiddle

Answer 2

它的工作

$('.status_change li').click(function(){
    alert($(this).html());
});

Demo

Answer 3

你可以试试这个：

$('.status_change li a').click(function(){
   var text1=$(this).text();
   var text2=$("span.status_change").html();
   $("span.status_change").html(text1+text2.substring(text2.indexOf("<span")));    
});

.substring()提取嵌套在您要插入文本的span元素内的span元素。

DEMO

如何在span中选择bootstrap下拉列表？

3 个答案: