需求:操作下拉列表框,显示选中的数据,然后将选择的数据添加到li中
1.将json的包添加进来
2.编写一个界面,用于实现功能
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var v1=[
{id:"01",name:"广东"},
{id:"02",name:"河北"},
{id:"03",name:"山东"}
];
//页面载入完毕执行
$(function(){
for(var i=0;i<v1.length;i++){
var id = v1[i].id;
var name = v1[i].name;
var s_opt = '<option value="'+id+'">'+name+'</option>';
var $opt = $(s_opt);
$("#s1").append($opt);
}
});
//下拉单选项改变事件处理
$(function(){
$("#s1").change(function(){
var value = $("#s1 option:selected").text();
$("#name_span").html(value);
var s_li = "<li>"+value+"</li>";
var $li = $(s_li);
$("#u1").append($li);
});
});
</script>
</head>
<body>
省份:<select id="s1"></select>
你选择的是:<span id="name_span"></span>
<ul id="u1"></ul>
</body>
</html>
3.实现的效果