无法在下拉引导中显示选定的值
[英]Can't show selected value in dropdown bootstrap
问题描述
Below is the example I tried. 
下面是我尝试的示例。 But I can't see the selected value in dropdown. 但是我在下拉列表中看不到选定的值。 In the example, I want to change the value "Foo" to "Bar", But I can't. 在示例中，我想将值“ Foo”更改为“ Bar”，但是我不能。 what's the problem here? 这是什么问题？
<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>
2 个解决方案
解决方案1
0 2015-06-04 19:38:40
I am able to update the button text with the selected drop down value. 我可以使用选定的下拉值更新按钮文本。 Please note that according to your question, you want to change "Foo" to "Bar", however your value is not "Bar", but "bar". 请注意，根据您的问题，您要将“ Foo”更改为“ Bar”，但是您的值不是“ Bar”，而是“ bar”。 I am retrieving the value using .data('value') . 我正在使用.data('value')检索值。 If you wanted to retrieve the text, you would use .text() . 如果要检索文本，则可以使用.text() 。
$(".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
});
解决方案2
0 已采纳 2015-06-04 19:46:44
Think you're missing a document ready call & the text rather than val call too - have updated below 认为您缺少文档就绪调用和文本，而不是val调用-在下面进行了更新
$(document).ready(function(){
$(".dropdown-menu li a").on('click',function(evt){
$(this).closest(".input-group-btn").find('.btn').text($(this).data('value'));
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.