JSONdemo

最新推荐文章于 2023-09-06 15:25:00 发布

shijingan

最新推荐文章于 2023-09-06 15:25:00 发布

阅读量563

点赞数

分类专栏： demo 文章标签： demo

本文链接：https://blog.csdn.net/m0_37585523/article/details/70156988

版权

demo 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<title>模板</title>
<meta charset="utf-8" />
<script type="text/javascript"
	src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	var v1 = [ {
		id : "01",
		name : "广东"
	}, {
		id : "02",
		name : "河北"
	}, {
		id : "03",
		name : "山东"
	}, ];
	$(function() {//页面载入完毕执行
		//解析v1数据，生成option
		for (var i = 0; i < v1.length; i++) {
			var id = v1[i].id;
			var name = v1[i].name;
			//拼一个option字符串
			var s_opt = '<option value="'+id+'">' + name + '</option>';
			var $opt = $(s_opt);//将字符串转成jQuery对象
			//将option添加到select中
			$("#s1").append($opt);
		}
	});
	//实现显示选择的内容，练习思路：
	//1.触发事件源
	//下拉选择框$("#s1")
	//2.触发事件时机
	//onchange选项发生改变
	//3.执行什么样操作
	//提取当前选中的option内容
	//将内容显示到span中

	//下拉单选项改变事件处理
	$(function() {
		$("#s1").change(function() {
			//提取当前选中的option内容
			//var value=$("#s1").val();
			var value = $("#s1 option:selected").text();
			//将内容显示到span中
			$("#name_span").html(value);
			//向ul中添加一个li
			var s_li = "<li>" + value + "</li>";
			var $li = $(s_li);//将字符串转成jQuery对象
			$("#u1").append($li);//将li放到id=u1的<ul>中
		});
	});
</script>
</head>
<body>
	省份：
	<select id="s1">
	</select> 你选择的是：
	<span id="name_span"></span>
	<ul id="u1">
	</ul>
</body>

</html>

shijingan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONdemo

模板<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> var v1 = [ { id : "01", name : "广东" }, { id : "02", name : "河北" }, { id : "03", name : "山东" }, ]; $
复制链接

扫一扫