[ 登录注册 ]

yuyan

如何设置select下拉禁止选择

2016/08/25 22:33 游海东的技术专栏 返回上一页

如何设置select下拉禁止选择


1、问题背景

     设置select下拉框不能选择,利用disabled="disabled",但是颜色且显示白色,容易引起用户误解


2、问题实现

(1)只禁止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何设置select下拉禁止选择</title>
		<script src="../js/jquery-1.12.4.js"></script>
		<script>
			$(function(){
				
			});
		</script>
	</head>
	<body>
		<select id="sel" style="width: 200px; " disabled="disabled">
			<option value="1">项目经理</option>
			<option value="2">总经理</option>
			<option value="3">技术经理</option>
			<option value="4">部门经理</option>
		</select>
	</body>
</html>

(2)禁止且颜色为灰色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何设置select下拉禁止选择</title>
		<script src="../js/jquery-1.12.4.js"></script>
		<script>
			$(function(){
				
			});
		</script>
	</head>
	<body>
		<select id="sel" style="width: 200px; background-color: #EEEEEE;" disabled="disabled">
			<option value="1">项目经理</option>
			<option value="2">总经理</option>
			<option value="3">技术经理</option>
			<option value="4">部门经理</option>
		</select>
	</body>
</html>

3、问题说明

     利用disabled="disabled"和background-color进行对select下拉框设置,这样才显示被禁止操作

          


文章来源:http://www.bozhiyue.com/web/yuyan/2016/0825/433303.html
评论
发表评论