ajax地址三级联动下拉表 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jquery-2.0.0.js" type="text/javascript"> </script>
<script src="address.js" type="text/javascript"></script>
<script src="addressdata.js" type="text/javascript"></script>
<script type="text/javascript" src="myscript.js"></script>
<script>
    //调用插件
    $(function() {
        $("#address").ProvinceCity();
    });
</script>
</head>
<body>方法一
    <div id="address"></div>
    方法二
      <table>
    <tr>
                    <td align="right">所在地：</td>
                    <td><select id="province">
                            <option>选择省份</option>
                    </select> <select id="city">
                            <option>选择城市</option>
                    </select> <select id="area">
                            <option>选择区域</option>
                    </select></td>
                </tr>
</table>
</body>
</html>
 /**myscript.js
     * 地址下拉单三级联动
     */
  $(function(){
      var $province=$("#province");
      var $city=$("#city");
      var $area=$("#area");
      $.each(GP,function(index,data){
          $province.append("<option value='"+data+"'>"+data+"</option>");
      });
      var index1="";
      $province.change(function(){
          //清空市和区的下拉框
          $city[0].options.length=1;
          $area[0].options.length=1;
          index1=this.selectedIndex;//获取当前选择的省的index
          if(index1!=0){//当选择的为"请选择时"
              //给市级下拉输入数据
              $.each(GC[index1-1],function(index,data){
                  $city.append("<option value='"+data+"'>"+data+"</option>");
              });
          }          
      });
      
      var index2="";
      $city.change(function(){
          //清空去的下拉框
          $area[0].options.length=1;
          index2=this.selectedIndex;//获取当前选择的市的index
          $.each(GA[index1-1][index2-1],function(index,data){
              $area.append("<option value='"+data+"'>"+data+"</option>");
          });
         
      });
  });
/**address.js
 * jQuery :  城市联动插件
 * @example  $("#address").ProvinceCity();
 * @params   暂无
 */
$.fn.ProvinceCity = function(){
    var self = this;
    //定义3个默认值
    self.data("province",["请选择", "请选择"]);
    self.data("city1",["请选择", "请选择"]);
    self.data("city2",["请选择", "请选择"]);
    //插入3个空的下拉框
    self.append("<select></select>");
    self.append("<select></select>");
    self.append("<select></select>");
    //分别获取3个下拉框
    var $sel1 = self.find("select").eq(0);
    var $sel2 = self.find("select").eq(1);
    var $sel3 = self.find("select").eq(2);
    //默认省级下拉
    if(self.data("province")){
        $sel1.append("<option value='"+self.data("province")[1]+"'>"+self.data("province")[0]+"</option>");
    }
    $.each( GP , function(index,data){
        $sel1.append("<option value='"+data+"'>"+data+"</option>");
    });
    //默认的1级城市下拉
    if(self.data("city1")){
        $sel2.append("<option value='"+self.data("city1")[1]+"'>"+self.data("city1")[0]+"</option>");
    }
    //默认的2级城市下拉
    if(self.data("city2")){
        $sel3.append("<option value='"+self.data("city2")[1]+"'>"+self.data("city2")[0]+"</option>");
    }
    //省级联动 控制
    var index1 = "" ;
    $sel1.change(function(){
        //清空其它2个下拉框
        $sel2[0].options.length=0;
        $sel3[0].options.length=0;
        index1 = this.selectedIndex;
        if(index1==0){    //当选择的为 “请选择” 时
            if(self.data("city1")){
                $sel2.append("<option value='"+self.data("city1")[1]+"'>"+self.data("city1")[0]+"</option>");
            }
            if(self.data("city2")){
                $sel3.append("<option value='"+self.data("city2")[1]+"'>"+self.data("city2")[0]+"</option>");
            }
        }else{
            $.each( GC[index1-1] , function(index,data){
                $sel2.append("<option value='"+data+"'>"+data+"</option>");
            });
            $.each( GA[index1-1][0] , function(index,data){
                $sel3.append("<option value='"+data+"'>"+data+"</option>");
            });
        }
    }).change();
    //1级城市联动 控制
    var index2 = "" ;
    $sel2.change(function(){
        $sel3[0].options.length=0;
        index2 = this.selectedIndex;
        $.each( GA[index1-1][index2] , function(index,data){
            $sel3.append("<option value='"+data+"'>"+data+"</option>");
        });
    });
    return self;
};

 

posted @ 2016-03-10 23:22  bky410702849  阅读(319)  评论(0)    收藏  举报