jquery全国省市县三级联动

贴出效果图片

贴出代码单独的htm页面在iframe中引用该页面即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>

               $(this.slt_sheng)[0].options.add(new Option("请选择","-1"));
               $(this.slt_shi)[0].options.add(new Option("请选择","-1"));
               $(this.slt_xian)[0].options.add(new Option("请选择","-1"));
               areaSelect.bindSheng();
               areaSelect.showSelect();
           },
           returnText : function(){ //返回选择的Text
               var s1= $(this.slt_sheng).find("option:selected").text();
               var s2= $(this.slt_shi).find("option:selected").text();
               var s3= $(this.slt_xian).find("option:selected").text();
               if(s3 != "请选择" && s2 != "请选择" && s1 != "请选择")
               {
                  $("span[id$='AreaText']",window.parent.document).html(s1 + "|" + s2 + "|" + s3);
               }
               if(s1 != "请选择" && s2 != "请选择" && s3 == "请选择")
               {
                  $("span[id$='AreaText']",window.parent.document).html(s1 + "|" + s2);
               }
               if(s1 != "请选择" && s2 == "请选择" && s3 == "请选择")
               {
                  $("span[id$='AreaText']",window.parent.document).html(s1);
               }
           },
           returnValue : function(){ //返回选择的Value
               var s1= $(this.slt_sheng).find("option:selected").val();
               var s2= $(this.slt_shi).find("option:selected").val();
               var s3= $(this.slt_xian).find("option:selected").val();
               if(s3 != "-1" && s2 != "-1" && s1 != "-1")
               {
                  $("span[id$='AreaValue']",window.parent.document).html(s1 + "|" + s2 + "|" + s3);
               }
               if(s1 != "-1" && s2 != "-1" && s3 == "-1")
               {
                  $("span[id$='AreaValue']",window.parent.document).html(s1 + "|" + s2);
               }
               if(s1 != "-1" && s2 == "-1" && s3 == "-1")
               {
                  $("span[id$='AreaValue']",window.parent.document).html(s1);
               }
           }
      };
      areaSelect.showSelect = function()//显示select控件和添加事件
      {
          $("body").append(areaSelect.slt_sheng);
          $("body").append(areaSelect.slt_shi);
          $("body").append(areaSelect.slt_xian);
          $(areaSelect.slt_sheng).change(function(){
             areaSelect.bindShi(this.value);
             areaSelect.returnText();
             areaSelect.returnValue();
          });
          $(areaSelect.slt_shi).change(function(){
             areaSelect.bindXian(this.value);
             areaSelect.returnText();
             areaSelect.returnValue();
          });
          $(areaSelect.slt_xian).change(function(){
             areaSelect.returnText();
             areaSelect.returnValue();
          });
      }
      areaSelect.bindSheng = function() //绑定省
      {
          for(var i = 0;i<arrySheng.length;i++)
          {
             var str = arrySheng[i].split(','); //分割单个省份
             $(areaSelect.slt_sheng)[0].options.add(new Option(str[0],str[1]));
          }
      }
      areaSelect.bindShi = function(strSheng) //绑定市
       {
           $(areaSelect.slt_shi).empty();
           $(areaSelect.slt_shi)[0].options.add(new Option("请选择","-1"));
           $(areaSelect.slt_xian).empty();
           $(areaSelect.slt_xian)[0].options.add(new Option("请选择","-1"));
           for(var i=0;i<arryShi.length;i++)
           {
              var str = arryShi[i].split(',');
              if(areaSelect.getCode12(str[1])==areaSelect.getCode12(strSheng) && areaSelect.getCode56(str[1])=="00" && areaSelect.getCode36(str[1]) != "0000")
              {
                 $(areaSelect.slt_shi)[0].options.add(new Option(str[0],str[1]));
              }
           }
       }
       areaSelect.bindXian = function(strShi) //绑定县
       {
           $(areaSelect.slt_xian).empty();
           $(areaSelect.slt_xian)[0].options.add(new Option("请选择","-1"));
           for(var i=0;i<arryXian.length;i++)
           {
              var str = arryXian[i].split(',');
              if(areaSelect.getCode14(str[1])==areaSelect.getCode14(strShi) && areaSelect.getCode56(str[1]) != "00")
              {
                 $(areaSelect.slt_xian)[0].options.add(new Option(str[0],str[1]));
              }
           }
       }
       areaSelect.getCode14 = function(str) //去字符串的后四位
       {
          if(str != "-1")
          {
             return str.substring(0,4);
          }
          else
          {
             return str;
          }
       }
       areaSelect.getCode12 = function(str) //取字符串的前两位
       {
          if(str != "-1")
          {
             return str.substring(0,2);
          }
          else
          {
             return str;
          }
       }
       areaSelect.getCode34 = function(str) //取字符串中间两位
       {
          if(str != "-1")
          {
             return str.substring(2,4);
          }
          else
          {
             return str;
          }
       }
       areaSelect.getCode56 = function(str) //取字符串的最后两位
       {
          if(str != "-1")
          {
             return str.substring(4,6);
          }
          else
          {
             return str;
          }
       }
       areaSelect.getCode36 = function(str) //去字符串的后四位
       {
          if(str != "-1")
          {
             return str.substring(2,6);
          }
          else
          {
             return str;
          }
       }
      $(function(){
         areaSelect.createSelect();
      });
    </script>

</head>
<body>
</body>
</html>

posted @ 2011-08-25 11:34 ajunfly 阅读(10524) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

ajunfly

jquery全国省市县三级联动

公告