js联动三级

自己研究三级加看网上的例子得出来的

<select id="province">
   <option value="">----请选择----</option>
  </select>省份
  <select id="city">
   <option value="">----请选择----</option>
   </select>市
  <select id="country">
   <option value="">----请选择----</option>
   </select>区

var city =[
     ['合肥','宿州','淮北','阜阳','蚌埠','淮南','滁州','马鞍山','芜湖','铜陵','安庆','黄山','六安','池州','宣城','亳州'],
     ['广州','深圳','清远','韶关','河源','梅州','潮州','汕头','揭阳','汕尾','惠州','东莞','珠海','中山','江门','佛山','肇庆','云浮','阳江','茂名','湛江']];
  var country =[[['合肥1','合肥2'],['宿州1','宿州2'],['淮北1','淮北2'],['阜阳1','阜阳2'],['蚌埠1','蚌埠2'],['淮南1','淮南2']
      ,['滁州1','滁州2'],['马鞍山1','马鞍山2'],['芜湖1','芜湖2'],['铜陵1','铜陵2'],['安庆','安庆2'],['黄山','黄山2']
      ,['六安1','六安2'],['池州1','池州2'],['宣城1','宣城2'],['亳州1','亳州2']],[['广州1','广州2'],['深圳1','深圳2']
      ,['清远','清远2'],['韶关1','韶关2'],['河源1','河源2'],['梅州1','梅州2'],['潮州1','潮州2'],['汕头1','汕头2']
      ,['揭阳1','揭阳2'],['汕尾1','汕尾'],['惠州1','惠州2'],['东莞1','东莞2'],['珠海1','珠海2'],['中山1','中山2']
      ,['江门1','江门2'],['佛山1','佛山2'],['肇庆1','肇庆2'],['云浮1','云浮2'],['阳江1','阳江2'],['茂名1','茂名2']
      ,['湛江1','湛江2']]];

$(function(){
for(var i in province){
$("#province").append('<option>'+province[i]+'</option>');

}

$("#province").change(function(){
      $("#city").children().not(':eq(0)').remove();//选择其他省的时候，把之前内容清空掉
      $("#country").children().not(':eq(0)').remove();//这个步骤是为了，当你选择其他省市区选好后，你选别的其他省区是不会清空，
var City=$(this).children("option:selected").index();//取到selected的值
   var citys = city[num1-1];
      var citys = city[City-1]; //为什么要City-1呢因为市里面的要与省的相对于,我们打的第一行有个---请选择----,要把它减掉才能对应起来.然后传到city里面,再交到citys遍历出来
      for(var i in citys){
       $("#city").append("<option>"+citys[i]+"</option>");
      }
    });

$("#city").change(function(){
     $("#country").children().not(":eq(0)").remove();
     var Country=$(this).children("option:selected").index();//:selected---查找所有选中的选项元素--$("select option:elected")
     var countrys = country[Country-1][Country-1];
     for(var i in countrys){
      $("#country").append("<option>"+countrys[i]+"</option>");
     }
    })

})

猜你喜欢