城市三级联动选项卡完美整理

时间:2014-02-19  发布人:SHX  浏览次数:4596  评论:0

用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现
第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题
第二个是采用Json数据格式构建,是我的第二次尝试改进
第三个与第二个其实是一样的,只不过将数据分离到JS文件中,我的代码中有一个ASP文件,是调用数据库生成Json省市区数据的,如果页面直接调用ASP文件,速度会很慢,生成JS文件后直接调用就要快的多,而且这部分数据一般不会改动

下面是部分案例代码

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="areadata.js"></script>
<script type="text/javascript">
$(function(){
 var $s1=$("#Select1");
 var $s2=$("#Select2");
 var $s3=$("#Select3");
 // var v1=null;
 // var v2=null;
 // var v3=null;
 var v1="01";
 var v2="0102";
 var v3="010202";
 $.each(threeSelectData,function(k,v){
  appendOptionTo($s1,k,v.val,v1);
 });
 $s1.change(function(){
  $s2.html("");
  $s3.html("");
  if(this.selectedIndex==-1) return;
  var s1_curr_val = this.options[this.selectedIndex].value;
  $.each(threeSelectData,function(k,v){
   if(s1_curr_val==v.val){
    if(v.items){
     $.each(v.items,function(k,v){
      appendOptionTo($s2,k,v.val,v2);
     });
    }
   }
  });
  if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
  $s2.change();
 }).change();
 $s2.change(function(){
  $s3.html("");
  var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
  if(this.selectedIndex==-1) return;
  var s2_curr_val = this.options[this.selectedIndex].value;
  $.each(threeSelectData,function(k,v){
   if(s1_curr_val==v.val){
    if(v.items){
     $.each(v.items,function(k,v){
      if(s2_curr_val==v.val){
       $.each(v.items,function(k,v){
        appendOptionTo($s3,k,v,v3);
       });
      }
     });
     if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
    }
   }
  });
 }).change();
 function appendOptionTo($o,k,v,d){
  var $opt=$("<option>").text(k).val(v);
  if(v==d){$opt.attr("selected", "selected")}
  $opt.appendTo($o);
 }
});
</script>
<style type="text/css" media="screen">
 select{width:80px;}
</style>
<select id="Select1" name="Select1"></select>
<select id="Select2" name="Select2"></select>
<select id="Select3" name="Select3"></select>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="areadata.js"></script>
<script type="text/javascript">
/*
通用三级联动说明
参数配置如下,配置select的三个ID和默认值就行,无默认值填写为null
var defaults = {
 s1:'Select1',
 s2:'Select2',
 s3:'Select3',
 v1:null,
 v2:null,
 v3:null
};
*/
var defaults = {
 s1:'Select1',
 s2:'Select2',
 s3:'Select3',
 v1:120000,
 v2:120200,
 v3:120224
};
$(function(){
 threeSelect(defaults);
});
function threeSelect(config){
 var $s1=$("#"+config.s1);
 var $s2=$("#"+config.s2);
 var $s3=$("#"+config.s3);
 var v1=config.v1?config.v1:null;
 var v2=config.v2?config.v2:null;
 var v3=config.v3?config.v3:null;
 $.each(threeSelectData,function(k,v){
  appendOptionTo($s1,k,v.val,v1);
 });
 $s1.change(function(){
  $s2.html("");
  $s3.html("");
  if(this.selectedIndex==-1) return;
  var s1_curr_val = this.options[this.selectedIndex].value;
  $.each(threeSelectData,function(k,v){
   if(s1_curr_val==v.val){
    if(v.items){
     $.each(v.items,function(k,v){
      appendOptionTo($s2,k,v.val,v2);
     });
    }
   }
  });
  if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
  $s2.change();
 }).change();
 $s2.change(function(){
  $s3.html("");
  var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
  if(this.selectedIndex==-1) return;
  var s2_curr_val = this.options[this.selectedIndex].value;
  $.each(threeSelectData,function(k,v){
   if(s1_curr_val==v.val){
    if(v.items){
     $.each(v.items,function(k,v){
      if(s2_curr_val==v.val){
       $.each(v.items,function(k,v){
        appendOptionTo($s3,k,v,v3);
       });
      }
     });
     if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
    }
   }
  });
 }).change();
 function appendOptionTo($o,k,v,d){
  var $opt=$("<option>").text(k).val(v);
  if(v==d){$opt.attr("selected", "selected")}
  $opt.appendTo($o);
 }
}
</script>
<style type="text/css" media="screen">
 select{width:80px;}
</style>
<select id="Select1" name="Select1"></select>
<select id="Select2" name="Select2"></select>
<select id="Select3" name="Select3"></select>

 

Desktop.zip

返回

上一篇:PHP过滤前端输入的非法内容下一篇:获取免费CMCC,chinanet的方法

我要评论

    loading
 

关闭

loading

回顶部