我想将下拉列表中选定的文本值显示到我的按钮。 我尝试单击下拉列表中的文本值,但按钮未显示下拉列表中选定的文本值。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dropDownUl li")
on('click', function() {
$('#dropDownBtn').val($(this).text());
});
});
</script>
</head>
<body>
<div class="dropdown" style="margin-top: 10px;">
<button id="dropDownBtn" class="btn btn-primary dropdown-toggle "
type="button" data-toggle="dropdown">
Choose A Date <span class="caret"></span>
</button>
<ul id="dropDownUl" class="dropdown-menu">
<li class="text-center">16-12-2016</li>
<li class="text-center">27-12-2016</li>
<li class="text-center">01-02-2017</li>
</ul>
</div>
</body>
</html>
最佳答案
您需要设置button
的.text
属性而不是val
。
$(document).ready(function () {
$("#dropDownUl li").on('click', function () {
$('#dropDownBtn').text($(this).text());
});
});
关于javascript - 将下拉列表中选定的文本值显示到按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41275651/