一个菜鸟的互联网技术分享博客
您的位置: 主页 > javaascript、ajax三级联动
advertisement

javaascript、ajax三级联动

纯html加javascript部分代码如下:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>三级联动</title>  
  6. </head>  
  7. <body>  
  8. <select id="sheng">  
  9.     <option value="">-请选择-</option><!--先创建三个下拉栏,分别对应 省 市 县-->  
  10. </select>  
  11.   
  12. <select id="shi">  
  13.     <option value="">-请选择-</option>  
  14. </select>  
  15.   
  16. <select id="xian">  
  17.     <option value="">-请选择-</option>  
  18. </select>  
  19. <script>  
  20.     var osheng=document.getElementById("sheng");  
  21.     var oshi=document.getElementById("shi");  
  22.     var oxian=document.getElementById("xian");  
  23.   
  24.     var arr_sheng=["陕西省","云南省","四川省","山西省"];<!--创建一个一维数组,存入省的值-->  
  25.   
  26.     var arr_shi=[<!--创建一个二维数组,最外层每一个元素对应省-->  
  27.         ["西安市","咸阳市","宝鸡市","渭南市"],<!--数组中的第一个元素内又定义一个数组存的市的值-->  
  28.         ["昆明市","大理市","丽江市","西双版纳市"],  
  29.         ["乐山市","成都市","大同市","高新市"],  
  30.         ["太原市","屏显市","乐宝市","李伟市"]  
  31.     ];  
  32.   
  33.     var arr_xian=[<!--创建一个三维数组,最外层每一个元素(对应省)-->  
  34.             [<!--数组中定义四个数组(对应市)-->  
  35.                 ["西安县1","西安县2"],["咸阳市1","咸阳市2"],["宝鸡市1","宝鸡市2"],["渭南市1","渭南市2"]  
  36.             ],<!--数组中定义两个元素(对应县)-->  
  37.             [  
  38.                 ["昆明市1","昆明市2"],["大理市1","大理市2"],["丽江市1","丽江市2"],["西双版纳市1","西双版纳市2"]  
  39.             ],  
  40.             [  
  41.                 ["乐山市1","乐山市2"],["成都市1","成都市2"],["大同市1","大同市2"],["高新市1","高新市2"]  
  42.             ],  
  43.             [  
  44.                 ["太原市1","太原市2"],["屏显市1","屏显市2"],["乐宝市1","乐宝市2"],["李伟市1","李伟市2"]  
  45.             ]  
  46.     ];  
  47.   
  48.     var  quanju_arr;//创建一个全局对象,用于存储一个中间数组  
  49.   
  50.     function input_arr(arr,event){//封装一个函数,用于向下拉栏中添加元素  
  51.         for(var i=0;i<arr.length;i++){//下拉栏内的元素来源于数组中的元素,遍历数组  
  52.             var option=new Option(arr[i],i);//创建Option对象(这个O要大写),存入值  
  53.             event.appendChild(option);//把option添加到event对象的末尾  
  54.         }  
  55.     }  
  56.   
  57.     input_arr(arr_sheng,osheng);//调用,给省下拉栏添元素  
  58.   
  59.     osheng.onchangefunction () {//给下拉栏绑定事件(当下拉栏元素改变时执行)  
  60.         oshi.options.length=1;//当省下拉栏改变时,清空市的下拉栏内元素  
  61.         oxian.options.length=1;//当省下拉栏改变时,清空县的下拉栏内元素  
  62.         var index=this.value;//每一个option标签都有一个value值索引,获取索引,用于数组中元素的选择  
  63.         var arr_shi_next=arr_shi[index];//获取当前选择省的市元素并赋给一个数组  
  64.         quanju_arr=arr_xian[index];//获取当前选择省中市的县元素并赋给定义的中间数组  
  65.         input_arr(arr_shi_next,oshi);//调用,给市下拉栏添元素  
  66.     }  
  67.   
  68.     oshi.onchangefunction () {  
  69.         oxian.options.length=1;  
  70.         var index=this.value;  
  71.         var arr_xian_next=quanju_arr[index];  
  72.         input_arr(arr_xian_next,oxian);//调用,给县下拉栏添元素  
  73.     }  
  74. </script>  
  75. </body>  
  76. </html>  

ajax请求部分代码如下:

部分html部分:
  1. <select name="" id="aaa">  
  2. </select>  
  3. <select name="" id="bbb">  
  4. </select>  
  5. <select name="" id="ccc">  
  6. </select>  

ajax部分:

  1. $(function () {  
  2.     $.ajax({  
  3.         url: '/api/industryData/',  
  4.         type: 'get',  
  5.         dataType: 'json',  
  6.         success: function (data) {  
  7.             function aF() {  
  8.                 for (var i = 0; i < data.data[0].length; i++) {  
  9.                     var option = '<option value="' + data.data[0][i]['id'] + '">' + data.data[0][i]['text'] + '</option>}'  
  10.                     $('#aaa').append(option)  
  11.                 }  
  12.             }  
  13.             function bF(p_id) {  
  14.                 $("#bbb").empty();  
  15.                 for (var j = 0; j < data.data[1].length; j++) {  
  16.                     if (data.data[1][j]['p_id'] == p_id) {  
  17.                         var option = '<option value="' + data.data[1][j]['id'] + '">' + data.data[1][j]['text'] + '</option>}'  
  18.                         $('#bbb').append(option);  
  19.                     }  
  20.                 }  
  21.             }  
  22.             function cF(c_id) {  
  23.                 $('#ccc').empty();  
  24.                 for (var k = 0; k < data.data[2].length; k++) {  
  25.                     if (data.data[2][k]['c_id'] == c_id) {  
  26.                         var option = '<option value="' + data.data[2][k]['id'] + '">' + data.data[2][k]['text'] + '</option>}'  
  27.                         $('#ccc').append(option);  
  28.                     }  
  29.                 }  
  30.             }  
  31.             aF();  
  32.             bF(0);  
  33.             cF(0);  
  34.             $("#aaa").change(function () {  
  35.                 bF($(this).val());  
  36.                 cF($("#bbb").val());  
  37.             })  
  38.             $("#bbb").change(function () {  
  39.                 cF($(this).val())  
  40.             })  
  41.         },  
  42.         error: function () {  
  43.             console.log('error');  
  44.         }  
  45.     })  
  46. });  

效果图如下:

zhangren.online
上一篇:获取当前页面的链接里的某个值
下一篇:jquery ajax防重复提交

您可能喜欢

​如何将自己写的代码上传到github上

​如何将自己写的代码上传到github上

​es6常用数组操作及技巧汇总

​es6常用数组操作及技巧汇总

​jQuery数字字母组合验证码

​jQuery数字字母组合验证码

回到顶部