javascript - 将下拉列表中选定的文本值显示到按钮

标签 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>

最佳答案

您需要设置button.text属性而不是val

$(document).ready(function () {
 $("#dropDownUl li").on('click', function () {
     $('#dropDownBtn').text($(this).text());
   });
});

关于javascript - 将下拉列表中选定的文本值显示到按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41275651/

相关文章:

javascript - 如何在一页网站上制作 "one scroll"

html - flex 网格 : Alternate left and right

html - 像这里的图片一样获取一个无序列表来环绕

javascript - 创建通用自定义组件 React

javascript - D3 将值显示为右轴上的标签

javascript - 我如何在 Node 中使用 Passport.js 模拟另一个用户?

javascript - 从 Angular 2 中 Chartist 的 API 获取数据

html - 左上对齐按钮文本

javascript - 在 Javascript 上用大写字母替换比较

html - Rails/Bootstrap/css/响应式图像尺寸小