ajax地址三級聯動下拉表

時間 2019-12-05

標籤 ajax 地址三級聯動下拉欄目 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;
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。