Question

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

<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>

Answer 1

不幸的是，我不相信你能够使用传统的bootstrap下拉菜单实现这种效果。

与传统的HTML“select”不同，bootstrap下拉列表通常用于对标题下的一系列链接进行分组。单击菜单项时，它不会被选中，而是通常执行操作。

我建议只使用简单的HTML选择，但是从引导CSS库中借用样式以使其看起来一致。有点像：

<select class="bootstrap-select">
  <option value="1" selected="selected">Feature 1</option>
  <option value="2">Feature 2</option>
  <option value="3">Feature 3</option>
  <option value="4">Feature 4</option>
</select>

Answer 2

试试这个：

$(document).ready(function() {  
   $(".dropdown .dropdown-menu li a")[0].click();
});

这将始终选择您的第一个li

Answer 3

“已选择”属性仅适用于<select>个元素。不幸的是它在列表中不起作用。

我相信你想要的是：

<select class="form-control" name="features">
    <option value="" selected>Feature 1</option>
    <option value="">Feature 2</option>
    <option value="">Feature 3</option>
    <option value="">Feature 4</option>
    <option value="">Feature 5</option>
    <option value="">Feature 6</option>
</select>

Answer 4

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <?php //your loop start here{ ?>
        <a id="some_id" class="dropdown-item" href="#"> <?php echo $yourvalue ?> </a>
    <?php //your loop end here  } ?>
  </div>
</div>

  .....

</html>

<script>                                                         
    $(document).ready(function() {  
    $("#some_id")[0].click();
     });
 </script>

引导程序下拉列表中的默认选择

4 个答案: