使用JQUERY实现JSON数据三级联动
2015-09-16 16:06
761 查看
<!DOCTYPE html> <html> <head> <title>json数据三级联动select</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script> </head> <body> <div> <label>品牌:</label><select id="sel1"></select> <label>型号:</label><select id="sel2"></select> <label>价格:</label><select id="sel3"></select> </div> <script type="text/javascript"> (function($){ var data = {'car':[ {'brand':'本田','param':[ {'name':'飞度','price':'9w'}, {'name':'锋范','price':'10w'}, {'name':'思域','price':'14w'}, {'name':'xx','price':'15w'} ]}, {'brand':'宝马','param':[ {'name':'3x','price':'49w'}, {'name':'5x','price':'70w'}, {'name':'7x','price':'214w'} ]}, {'brand':'奔驰','param':[ {'name':'C级','price':'28w'}, {'name':'E级','price':'40w'} ]} ]}; //console.log(data); var $sel1 = $('#sel1'); var $sel2 = $('#sel2'); var $sel3 = $('#sel3'); function select_1(n){//构造第一个select var n = n || 0; var html = ''; var len = data.car.length; for(var i = 0; i < len; i++){ if(i == n){ html += '<option value="' + data.car[i].brand + '" selected="selected">' + data.car[i].brand + '</option>'; }else{ html += '<option value="' + data.car[i].brand + '">' + data.car[i].brand + '</option>'; } } $sel1.html(html); select_2(n); } function select_2(n,q){//构造第二个select var n = n || 0; var q = q || 0; var html = ''; var len = data.car .param.length; for(var i = 0; i < len; i++){ if(i == q){ html += '<option value="' + data.car .param[i].name + '" selected="selected">' + data.car .param[i].name + '</option>'; }else{ html += '<option value="' + data.car .param[i].name + '" >' + data.car .param[i].name + '</option>'; } } $sel2.html(html); select_3(n,q); } function select_3(n,q){//构造第三个select var n = n || 0; var q = q || 0; var html = ''; html += '<option value="' + data.car .param[q].price + '" >' + data.car .param[q].price + '</option>'; $sel3.html(html); } select_1();//初始化 $sel1.change(function(){//绑定第一个select var n = $sel1.find(':selected').index(); select_1(n); }); $sel2.change(function(){//绑定第二个select var n = $sel1.find(':selected').index(); var q = $sel2.find(':selected').index(); select_3(n,q); }); })(jQuery); </script> </body> </html>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- 5个常见可用性错误和解决方案
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- XML 与 JSON 优劣对比
- VBA将excel数据表生成JSON文件
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作