二级联动下拉列表框示例

解决方案 »

  1.   

    //下拉框的联运操作开始
    /* 
     *将指定下拉列表的选项值清空  
     **/ 
    function funcRemoveOptions(selectObj) {     
     if (typeof selectObj != 'object'){    
        selectObj = document.getElementById(selectObj);
     } 
     var len = selectObj.options.length; // 原有选项计数
      for (var i=0; i < len; i++){
        selectObj.options[0] = null;// 移除当前选项
      } 
    }
      
    /*
     *设置传入的选项值到指定的下拉列表中selected 默认选中值,可选  
     **/
    function funcSetSelectOption(selectObj, optionList, firstOption, selected){
     if (typeof selectObj != 'object'){
      selectObj = document.getElementById(selectObj);
     }
     funcRemoveOptions(selectObj); // 清空选项
     var start = 0;// 选项计数
     if (firstOption){// 如果需要添加第一个选项
      selectObj.options[0] = new Option(firstOption, ''); 
      start ++;// 选项计数从 1 开始
     }
     var len = optionList.length;
     for (var i=0; i < len; i++){
       selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);// 设置 option 
       if(selected == optionList[i].val){// 选中项
        selectObj.options[start].selected = true;
       } 
     start ++;// 计数加 1
     }  
    } /* 选项具体内容设置 */ 
    var selData = [];
     selData['1003'] = [//'01'代表上级菜单的value值
      {txt:'a查询', val:'0'},//txt是显示在页面上的选项,val是该选项对应的值
      {txt:'b查询', val:'1'}
     ];
     selData['1006'] = [
        {txt:'彩部',  val:'-UMGJ'},
        {txt:'营科',    val:'112'},
        {txt:'典',    val:'11'},
        {txt:'手', val:'128'},
        {txt:'国学堂',      val:'13'}
        //{txt:'非洲',        val:'14'}//最后一个选项不能以“'”结束
     ];
     //设置二级下拉框
    function funcSetCity(select1) {
      funcSetSelectOption('select2', selData[select1], '-请选择-');
    }
    //下拉框的联运操作结束
    将这静态数据改成动态获取