JQuery-val方法填充输入框内容、选中单选、复选和下拉列表

最新推荐文章于 2022-06-20 15:10:39 发布

paku-san

最新推荐文章于 2022-06-20 15:10:39 发布

阅读量639

点赞数

分类专栏：前端文章标签： JQuery JavaScript 前端

本文链接：https://blog.csdn.net/qq_35302939/article/details/90753625

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

输入框
单选
复选
下拉列表

输入框

填充输入框内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input id="show" />
		<script>
			$("#show").val("默认值");
		</script>
	</body>
</html>

效果

输入框中自动填充了“默认值”三个字

单选

选中单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input id="show" />
		
		<input type="radio" name="gender" value="0"/>男
		<input type="radio" name="gender" value="1"/>女
		<script>
			$("[name='gender']").val(["0"]);
			$("#show").val("默认值");
		</script>
	</body>
</html>

效果：

把值设为“1”就相当于，选择了value="1"的选项

复选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input id="show" />
		<input type="radio" name="gender" value="0"/>男
		<input type="radio" name="gender" value="1"/>女
		
		<input type="checkbox" name="hobby" value="0"/>足球
		<input type="checkbox" name="hobby" value="1"/>网球
		<input type="checkbox" name="hobby" value="2"/>乒乓
		<input type="checkbox" name="hobby" value="3"/>橄榄球
		<script>
			$("[name='gender']").val(["0"]);
			$("[name='hobby']").val(["1","2"]);
			$("#show").val("默认值");
		</script>
	</body>
</html>

效果：

把复选框中value="1"和value="2"的选项选择了出来，这里需要的注意的是传入的参数为数组

下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input id="show" />
		<input type="radio" name="gender" value="0"/>男
		<input type="radio" name="gender" value="1"/>女
		<input type="checkbox" name="hobby" value="0"/>足球
		<input type="checkbox" name="hobby" value="1"/>网球
		<input type="checkbox" name="hobby" value="2"/>乒乓
		<input type="checkbox" name="hobby" value="3"/>橄榄球
		
		<select>
			<option value="0">--请选择--</option>
			<option value="1">一年级</option>
			<option value="2">二年级</option>
			<option value="3">三年级</option>
		</select>
		
		<script>
			$("[name='gender']").val(["0"]);
			$("[name='hobby']").val(["1","2"]);
			$("#show").val("默认值");
			$("select").val("2");
		</script>
	</body>
</html>