Select标签下拉列表二级联动级联实例代码

  首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID。

  

复制代码 代码如下:

  var options=new Array();

  $(document).ready(function(){

  //二级联动

  $('#ddlPages').children('option').each(function(i){

  options[i]='<option value="'+$(this).val()+'">'+$(this).text()+'</option>';

  });//将option列表放到数组里

  $('#ddlPages option:gt(0)').remove();    //清楚下拉

  $('#ddlSubsystems').bind('change',function(){        //注册事件

  var systemname=$('#ddlSubsystems option:selected').text();

  for(var j=0;j<options.length;j++){

  $('#ddlPages').append(options[j]);

  }    //option列表先初始化

  $('#ddlPages option:gt(0)').each(function(i){    //遍历排除

  var textname=$(this).text();

  var index=textname.indexOf('-'+systemname);

  if(index<0){

  $(this).remove();

  }else{

  $(this).text(textname.substring(0,index));

  }

  });

  $('#ddlPages').val(0);                            //默认选中第一行

  });

  });