<!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>
转载请注明原文地址: https://ju.6miu.com/read-665992.html
