Question

我有这个HTML代码：

<div id="select-option" class="btn-group">
    <button type="button" class="btn btn-default btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        Select your option <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right" role="menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
        <li><a href="#">Option 5/a></li>
    </ul>
</div>

现在我有一个问题是根据使用jquery选择的li更改该文本'Select your option'。

并删除btn-danger，以便颜色也会改变。

我尝试使用<select>标记进行更改，但样式与btn-danger不同。

任何想法如何改变它？

我试着做一个简单的警告框来测试jquery是否可以应用于此，但没有运气：

$("#select-option").change(function () {
alert("Hello world.");
};

Answer 1

您的代码未提供警报，因为Bootstrap下拉列表不是表单字段，并且没有change事件。

如果我们查看Dropdown documentation，我们会看到在显示下拉列表时以及隐藏它时会触发事件。当然，如果用户点击一个，click元素上也会有li个事件。您可能希望在click上处理li。

在更改该文本方面，最好的办法是将其放在自己的范围内，可能上面有一个类：

<button type="button" class="btn btn-default btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="message">Select your option</span> <span class="caret"></span>
</button>

...以便您可以使用选择器轻松定位它并使用text进行更改。

Answer 2

试试这个：

$(".dropdown-menu>li>a").on('click',function(){
        var val=$(this).html(); 
        $("#select-option >button").html(val);
    })

演示：http://jsfiddle.net/rts61emf/

Answer 3

试试这段代码

直播 DEMO

HTML

<div id="select-option" class="btn-group">
    <button type="button" class="btn btn-default btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
        <span class='listname'>Select your option </span><span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
        <li><a href="#">Option 5</a></li>
    </ul>
</div>

JS

$(function(){

  $(".dropdown-menu li a").click(function(){

    $(".dropdown-toggle .listname").text($(this).text());
  });

});

Answer 4

没关系，我已经得到了答案......

<script>
$(document).ready(function(){
  $("#select-option li").click(function(){
   alert("The LI was clicked.");
  });
});
</script>

我会从这里拿走它......

Answer 5

为每个li元素编写函数，即onclick =＆＃34; yourFuctionName（您的指定值）＆＃34;在javascript中，您可以轻松地从数据中做任何您想做的事情

根据选定的li更改按钮值

5 个答案: