java省市联查 jquery省市级联

省市级联是网页中一个非常重要的效果，可以用各种写出来，今天我用的是jQuery来写，用jQuery写可以节省代码，并且使得代码可读性也增强了，也便于理解。下面就是代码部分。

<label for='prov'>省：</label>
<select  id='prov'></select>
<label for='city'>市:</label>
<select  id='city'></select>

 

1 <script type='text/javascript' src='jQuery'></script>
 2 <script type='text/javascript'></script>

//省市联动效果
funciton clickProvChangeCity(){
//为省份的下拉列表框添加change事件
   $('#prov').change(funciton(){
    $('#city').empty();//当我们点击另一个省份的信息时，先前省份的城市信息要清空
    var provName=prov[this.selectedIndex];//省的名称对应于所选的省份
   var cities=prov[provName];//城市信息
//将城市的信息添加到城市的下拉列表框中
   for(var i=0;i<cities.length;i++){
       var myOption=document.createElement("option");
        myOption.innerHTML=cities[i];
       myOption.value=cities[i];
      $('#city').append(myOption);
}
});   
}

 

3 var prov=['四川','山东'];
 4 var prov['四川']=['成都','绵阳'];
 5 var prov['山东']=['青岛','济南'];
 6     // 将省份信息初始化到省份的下拉列表中
 7     function addProv(){
 8         for(var i=0;i<prov.length;i++){
 9 //创建一个option元素
10                 var myOption=document.createElement('option');
11                 myOption.innerHTML=prov[i];
12                 myOption.value=prov[i];
13 //将省份信息逐个添加到省份的下拉列表中
14                 $('#prov').append(myOption);
15 }
16 };

上面的两个方法写好了，程序基本上可以了，但是还有一个小问题，当我们刷新页面时，四川省份的城市信息并没有被初始化到列表框中，所以下面的方面就是来初始化下拉列表框中的第一个省份的城市信息。

function initFirstProv(){
   var cities=prov['四川'];
   
   for(var i=0;i<cities.length;i++){
       var myOption=document.createElement('option');
       myOption.innerHTML=cities[i];
      myOption.value=cities[i];
     $('#city').append(myOption);
}
}
//当页面加载完全后就执行里面的方法
$(function(){
   addProv();
   clickProvChangeCity();
   initFirstProv();
});