ajax读取的select选中项，让页面中select对应的option成为选中项

最新推荐文章于 2021-08-06 12:24:10 发布

原创最新推荐文章于 2021-08-06 12:24:10 发布 · 3.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何使用AJAX加载数据，并通过jQuery操作HTML中的Select元素，包括设置Select选项值及监听Select选项变化。

前言：这是ajax调数据的部分代码

	<p><span>连接方式</span>
		<select name="" class="jsaccess">
			<option value="Native2">Native2</option>
			<option value="Native">Native</option>
		</select>
	</p>

操作data.data[0]的ajax调数据接口的返回值，测试时可以写成$(".jsaccess").val("Native");

$(".jsaccess").val(data.data[0].access);

	setTimeout(function() {
		$(".jsaccess").val(data.data[0].access)
		$(".jstype").val(data.data[0].type)
	}, 500)

我的实际项目中，html代码是动态生成，所以加了定时器防止html代码还没生成时就操作

20180801追加

当select选项改变时获取当前项的value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select name="aa">
			<option value="1">选项1</option>
			<option value="2">选项2</option>
		</select>
		<script src="jquery.min.js"></script>
		<script>
			$("select[name='aa']").change(function(){
				console.log($(this).val())
			});
			
		</script>
	</body>
</html>