jQuery / Bootstrap：dropdown-toggle未将所选菜单项设置为默认选定项

时间：2023-01-19 08:49:35

I have a bootstrap dropdown but i am not able to set the selected menu item as default selected dropdown item?

我有一个bootstrap下拉列表,但我无法将所选菜单项设置为默认选择的下拉项目?

<div class="dropdown">
   <button class="btn dropdown-toggle" type="button" id="drpDownCat"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     Select a Category<span class="caret"></span>
   </button>

    <ul class="dropdown-menu" aria-labelledby="drpDownCat">
       <li><a class="dropdown-item" href="#">Category 1</a></li>
       <li><a class="dropdown-item" href="#">Category 2</a></li>
       <li><a class="dropdown-item" href="#">Category 3</a></li>
       <li><a class="dropdown-item" href="#">Category 4</a></li>
   </ul>
</div>

   <script>
   $('.dropdown-toggle').click(function()
     {
       $('.dropdown-menu').toggle();
     });

   </script>

I have created a JSFiddle for the above code.

我已经为上面的代码创建了一个JSFiddle。

2 个解决方案

#1

1  

Try this

$(function() {
  $(".dropdown-menu li a").click(function() {
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="drpDownCat" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select a Category<span class="caret"></span>
  </button>

  <ul class="dropdown-menu" aria-labelledby="drpDownCat">
    <li><a class="dropdown-item" href="#">Category 1</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 2</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 3</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 4</a>
    </li>
  </ul>
</div>

#2

1  

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="dropdown">
    <button class="btn dropdown-toggle" type="button" id="drpDownCat"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select a Category<span class="caret"></span>
  </button>

  <ul class="dropdown-menu" aria-labelledby="drpDownCat">
    <li><a class="dropdown-item" href="#">Category 1</a></li>
    <li><a class="dropdown-item" href="#">Category 2</a></li>
    <li><a class="dropdown-item" href="#">Category 3</a></li>
    <li><a class="dropdown-item" href="#">Category 4</a></li>
  </ul>
</div>
<script type="text/javascript">
$('.dropdown-item').click(function(){
  $("#drpDownCat").text(this.text)
});
</script>
</body>
</html>

#1

1  

Try this

$(function() {
  $(".dropdown-menu li a").click(function() {
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="drpDownCat" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select a Category<span class="caret"></span>
  </button>

  <ul class="dropdown-menu" aria-labelledby="drpDownCat">
    <li><a class="dropdown-item" href="#">Category 1</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 2</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 3</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 4</a>
    </li>
  </ul>
</div>

#2

1  

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="dropdown">
    <button class="btn dropdown-toggle" type="button" id="drpDownCat"
    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select a Category<span class="caret"></span>
  </button>

  <ul class="dropdown-menu" aria-labelledby="drpDownCat">
    <li><a class="dropdown-item" href="#">Category 1</a></li>
    <li><a class="dropdown-item" href="#">Category 2</a></li>
    <li><a class="dropdown-item" href="#">Category 3</a></li>
    <li><a class="dropdown-item" href="#">Category 4</a></li>
  </ul>
</div>
<script type="text/javascript">
$('.dropdown-item').click(function(){
  $("#drpDownCat").text(this.text)
});
</script>
</body>
</html>
标签：

相关文章