Question

以下是我尝试的示例。但我无法在下拉列表中看到所选值。 在示例中，我想要更改值＆＃34; Foo＆＃34;到了＆＃34; Bar＆＃34;，但我不能。 这里的问题是什么？

<html>
<head>
<title>LGA Form</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
  </script>
    <script type="text/javascript">

    $(".dropdown-menu li a").click(function(){
            $(this).parents(".input-group-btn").find('.btn').text($(this).text());
            $(this).parents(".input-group-btn").find('.btn').val($(this).data('value'));
}); 
 </script>
</head>

<body>

<div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
   Foo      
    <span class="caret"></span>
    </button>
   <ul class="dropdown-menu pull-left">
   <li><a href="#" data-value="bar">Bar</a></li>
   <li><a href="#" data-value="baz">Baz</a></li>
   <li><a href="#" data-value="beh">Beh</a></li>
 </ul>
</div>
</body>
</html>

Answer 1

我可以使用所选的下拉值更新按钮文本。请注意，根据您的问题，您想要将“Foo”更改为“Bar”，但您的值不是“Bar”，而是“bar”。我正在使用.data('value')检索该值。如果要检索文本，可以使用.text()。

updated fiddle

$(".dropdown-menu li a").click(function () {
     var btn = $(this).parents(".input-group-btn").find('.btn'); //get button
     var ddValue = $(this).data('value'); //get selected value
     var ddText = $(this).text(); //get selected text
     btn.text(ddValue); //set button text to selected value
 });

Answer 2

认为你错过了一个文件就绪电话＆amp;文本而不是val调用 - 已在下面更新

$(document).ready(function(){

   $(".dropdown-menu li a").on('click',function(evt){
        $(this).closest(".input-group-btn").find('.btn').text($(this).data('value'));
   }); 

});

无法在下拉式引导程序

2 个答案: