js 级联select

最新推荐文章于 2021-11-09 14:24:25 发布

xujingzhong0077

最新推荐文章于 2021-11-09 14:24:25 发布

阅读量479

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xujingzhong0077/article/details/49204533

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<SELECT ID="s1">
    <OPTION selected>请选择地区</OPTION>
</SELECT>
<SELECT ID="s2">
  <OPTION selected>请选择城市</OPTION>
</SELECT>  
<SELECT ID="s3">
  <OPTION selected>请选择镇</OPTION>
</SELECT>  
<script src="./jquery1.8.0.min.js"></script>
<script language="javascript" >
  function CLASS_LIANDONG_YAO()
  {
    this.obj = '';
    this.firstOne = ''; //第一个展示的option名字
    //设置第一个SELECT
    // 参数：indexName指选中项,selectName指select的ID,changeId选中的id
    this.firstSelectChange=function(parentValue,selectName,array_list,firstOne,changeId)
    {
      this.obj=document.all[selectName];
      this.firstOne = firstOne;
      this.optionChange(parentValue,this.obj.id,array_list,changeId)
    }

    //设置子SELECT
    // selectName1父级，selectName2子级，array_list展示的数据，parentchangeId父级选中id,changeId该级别默认选中
    this.subSelectChange=function(selectName1,selectName2,array_list,firstOne,parentchangeId,changeId)
    {
      var obj1=document.all[selectName1];
      var obj2=document.all[selectName2];
      this.firstOne = firstOne;
      var me=this;
      obj1.οnchange=function()
      {
        me.optionChange(this.options[this.selectedIndex].value,obj2.id,array_list);
      }
      if(parentchangeId){
        me.optionChange(parentchangeId,selectName2,array_list,changeId);
      }
    }

    // parentValue父级被选中的值,selectName指select的ID,array_list罗列该级别的数据,changeId选中的id
    this.optionChange=function (parentValue,selectName,array_list,changeId)
    {
      var obj1=document.all[selectName];
      obj1.length=0;
      obj1.options[0]=new Option(this.firstOne,'');
      for(var i=0;i<array_list.length;i++)
      {
        if(parentValue == array_list[i][0]){
          //new option('显示文案','值')
          if(changeId && changeId==array_list[i][1]){
            obj1.options[obj1.length++] = new Option(array_list[i][2],array_list[i][1],true,true);
          }else{
            obj1.options[obj1.length++] = new Option(array_list[i][2],array_list[i][1]);
          }

        }
      }
    }
  }
</script>  
  
  
<script language="javascript">
  //例子1-------------------------------------------------------------
  //数据源（可以多个数组，也可以单个数组做级联，单个数组数据可以做多个级联）
  var array1=new Array();
  array1[0]=new Array(0,1,"华南地区"); //数据格式 ID，父级ID，名称
  array1[1]=new Array(0,2,"华北地区");

  var array2=new Array();
  array2[0]=new Array(1,1,"上海");
  array2[1]=new Array(1,2,"广东");
  array2[2]=new Array(2,3,"北京");
  array2[3]=new Array(2,4,"河北");

  var array3=new Array();
  array3[0]=new Array(2,1,"湛江");
  array3[1]=new Array(2,2,"廉江");
  array3[2]=new Array(3,3,"五环");
  array3[3]=new Array(3,4,"六环");
  //--------------------------------------------
  //这是调用代码
  var liandong=new CLASS_LIANDONG_YAO() //设置数据源
  liandong.firstSelectChange(0,"s1",array1,'请选择地区',1);  //设置第一个选择框
  liandong.subSelectChange("s1","s2",array2,'请选择城市',1,2); //设置子级选择框
  liandong.subSelectChange("s2","s3",array3,'请选择镇',2,1);   //设置子级选择框
</script>

参考：http://www.codefans.net/jscss/code/3255.shtml 做了修改