项目未在下拉菜单中选择

Using bootstrap, I am selecting dropdown menu but it's not working and selected item is not appearing on top of the list.

使用bootstrap，我选择下拉菜单，但它不起作用，所选项目没有出现在列表的顶部。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select Business type <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">small</a></li>
    <li><a href="#">medium</a></li>
    <li><a href="#">large</a></li>
</ul>

1 个解决方案

#1

You will need some JavaScript to store the text value of the selected option in the button.

您需要一些JavaScript来存储按钮中所选选项的文本值。

As you are already using jQuery you can bind to the click event of the list items and then copy the text of the item to the text value of the button.

由于您已经在使用jQuery，因此可以绑定到列表项的click事件，然后将项的文本复制到按钮的文本值。

However, you also have to preserve the little caret <span class="caret"></span> so you can either make a template or just copy it and append it after the text has been changed.

但是，您还必须保留小插入符，以便您可以创建模板，也可以只复制它并在文本更改后附加它。

In the below example I went with the find/append option.

在下面的例子中，我使用了find / append选项。

$('.dropdown-menu li').on('click', function() {
  var $dropdown = $('.dropdown-toggle');
  var text = $(this).text();
  var $span = $dropdown.find('span');
  
  $dropdown.text(text).append($span);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select Business type <span class="caret"></span>
</button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">small</a></li>
    <li><a href="#">medium</a></li>
    <li><a href="#">large</a></li>
  </ul>

If you want to get fancier you could store the "template" in a variable and re-use it, similar to this:

如果你想变得更加漂亮，你可以将“模板”存储在变量中并重新使用它，类似于：

var dropdownTextTemplate = '{0} <span class="caret"></span>'

$('.dropdown-menu li').on('click', function() {
  var $dropdown = $('.dropdown-toggle');
  var text = $(this).text();
  var $span = $dropdown.find('span');
  
  $dropdown.html(dropdownTextTemplate.replace('{0}', text));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
    Select Business type <span class="caret"></span>
</button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">small</a></li>
    <li><a href="#">medium</a></li>
    <li><a href="#">large</a></li>
  </ul>

#1