总结val方法选中单选、复选和下拉列表

最新推荐文章于 2019-12-12 09:07:50 发布

YXX_decsdn

最新推荐文章于 2019-12-12 09:07:50 发布

阅读量526

点赞数

本文链接：https://blog.csdn.net/YXX_decsdn/article/details/90734518

版权

val方法

val方法选中单选
val方法选中复选
val方法选中下拉列表

先来看一个val方法的简单用法，用val()获取值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>HelloWorld</title>
		<!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input id="user_name" />
		<script>
			$("#user_name").val("Tom");//设定input文本框的值，val()函数也可以获取值。
		</script>
	</body>
</html>

运行后结果如下：

表单对象属性过滤选择器如下：

val方法选中单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>HelloWorld</title>
		<!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input type="radio" name="sex" value="0"/>男
		<input type="radio" name="sex" value="1"/>女
		
		<script>
			$("[name='sex']").val(["1"]);	//可以选中val为1的。
		</script>
	</body>
</html>

执行结果如下：
在这里插入图片描述
value值为1的被选中。
对于单选来说：每次只可以选中一个，如下代码执行结果不变,仍为只选中女。

val方法选中复选

如下代码

选中value值为1的选项
在这里插入图片描述
对于多选还可以指定选中多个选项，如下代码

执行后如下：

val方法选中下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>HelloWorld</title>
		<!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<select>
			<option value="0">语文</option>
			<option value="1">数学</option>
		</select>
		<script>
			$("select").val(["1"]);		//默认选中数学
		</script>
	</body>
</html>

运行结果如下：
在这里插入图片描述
下拉列表也只能选中一个。

YXX_decsdn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
总结val方法选中单选、复选和下拉列表

val方法val方法选中单选val方法选中复选val方法选中下拉列表先来看一个val方法的简单用法，用val()获取值<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>HelloWorld</title> <!-- 引入jQuer...
复制链接

扫一扫