JSONdemo

来源:互联网 发布:linux 服务器版本 编辑:程序博客网 时间:2024/06/09 20:52
<!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数据,生成optionfor (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中添加一个livar 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>

0 0
原创粉丝点击