<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动</title> <script src="../day10/jquery-1.8.3.js"></script> </head> <body> <!-- 省 --> <select name="" id="sheng"> <option value="">--请选择省--</option> </select> <!-- 市 --> <select name="" id="shi"> <option value="">--请选择市--</option> </select> <!-- 县/区 --> <select name="" id="xian"> <option value="">--请选择区县--</option> </select> <script> // 定义数据 省和市关系 var S={}; S['河北省']=['石家庄','承德']; S['山东']=['青岛','烟台']; S['河南']=['郑州','安阳']; // 定义市和县的关系 var s={}; s['石家庄']=['正定','藁城','桥西']; s['承德']=['兴隆','隆华']; s['青岛']=['市南','市北','崂山']; s['烟台']=['芝罘','福山']; s['郑州']=['金水','上街']; s['安阳']=['文峰','林州']; var str='<option value="">--请选择省--</option>'; //遍历省的随想拿到对象里面的键 写入select for(i in S){ // console.log(i); str+='<option value="' + i + '">'+i+'</option>'; } // console.log(str); $('#sheng').html(str); // 给省绑定change()事件 $('#sheng').change(function(){ var str1='<option value="">--请选择市--</option>'; // console.log($(this).val()); // 获取当前选中选项的value值 value对应市 var Val=$(this).val(); //通过索引回去对应的值(市) // console.log(S[Val]); for(i in S[Val]){ var Index=S[Val][i]; // console.log(Index); str1+='<option value="'+Index+'">'+Index+'</option>'; } // 将拼接好的数据写入市里 $('#shi').html(str1); }) $('#shi').change(function(){ var str2='<option value="">--请选择区县--</option>'; // console.log($(this).val()); // 获取当前选中选项的value值 value对应县 var Val=$(this).val(); //通过索引回去对应的值(县) // console.log(S[Val]); for(i in s[Val]){ var Index=s[Val][i]; // console.log(Index); str2+='<option value="'+Index+'">'+Index+'</option>'; } // 将拼接好的数据写入县里 $('#xian').html(str2); }) </script> </body> </html>