显示下拉按钮的所选文本值

时间:2016-12-22 04:09:30

标签: javascript html

我想将下拉列表的选定文本值显示在我的按钮上。 我尝试点击我的下拉列表的文本值,但我的按钮不显示我的下拉列表的选定文本值。



<!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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您需要设置.text的{​​{1}}属性而不是button

val