Bootstrap 引导下拉菜单不显示选定值

toe95027 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(3)|浏览(156)

使用最新的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/的

twitter-bootstrap

来源：https://stackoverflow.com/questions/37995838/bootstrap-dropdown-not-displaying-selected-value

3条答案

按热度按时间

egdjgwm81#

您只需要在jquery.js之后引用bootstrap.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'));
});

个字符

赞(0）回复(0）举报 2023-08-01

sg24os4d2#

我看到了你的 * 当前JSFiddle* 你应该先导入jQuery然后导入 * Bootstrap.js*！

赞(0）回复(0）举报 2023-08-01

pes8fvy93#

1.不要安装 Bootstrap 和弹出程序，如果安装请卸载软件包，它不应该出现在Node_modules文件夹中
1.从angular.js文件中删除bootstrap的所有条目。
1.直接使用index.html中的CDN URL解决popper和drop down的所有prb
这解决了我在index.html中的问题

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 引导下拉菜单不显示选定值

3条答案

相关问题

热门标签

最新问答