JS二级联动选择框动态创建和编辑实现

来源：互联网发布：淘宝刹那数码2店怎么样编辑：程序博客网时间：2024/05/17 07:11
网上关于二级联动选择框的实现很多，但是编辑页面的展示却不多。尤其是动态加载一级分类的，会比较复杂。此次业务选择了动态加载一级分类，下次再来写静态加载一级分类。
<script type="text/javascript">//声明一级分类数组  var topClassNames=['请选择','产品与服务','解决方案','成功案例','生态伙伴'];  //声明二级分类数组  var secondClassNames=[   [''],  ['跨企业的云平台应用','智能工厂','智能车间/产线','智能单元'],  ['通用解决方案','行业解决方案'],  ['无'],  ['无']  ];               function createTopClassNames(){       for(var i in topClassNames){           if('${B2bIntellmakeCapabilityInfo.topClassName}'==topClassNames[i])            {             var p=1;//设置标志，当有一级分类参数传来时，此时处于编辑界面，被selected展示            $("#topClassName").append("<option value="+topClassNames[i]+" selected='selected'>"+topClassNames[i]+"</option>");          }         //此时处于添加页面        else $("#topClassName").append("<option value="+topClassNames[i]+">"+topClassNames[i]+"</option>");      } }  function createSecondClassNames(){      $("#secondClassName").empty();        //获取一级分类选中项的索引           var index=topClassName.selectedIndex;              //将secondClassName下的所有原有option移除          secondClassName.options.length=0;          //添加对应二级分类下拉列表          for(var i in secondClassNames[index]){                     $("#secondClassName").append("<option value="+secondClassNames[index][i]+">"+secondClassNames[index][i]+"</option>");         }         if($('#topClassName option:selected').val()=='生态伙伴')//当一级分类是生态伙伴的时候，图片上传提示改为上传成员图片            {                    document.getElementById("team").style.display="";                document.getElementById("capability").style.display="none";            }            else{                document.getElementById("team").style.display="none";                document.getElementById("capability").style.display="";            }}       window.onload = function(){    //联动选择框    //声明获取的一级分类节点元素      var topClassName=document.getElementById("topClassName");      //声明获取的二级分类节点元素      var secondClassName=document.getElementById("secondClassName");     createTopClassNames();      if(p=1){//如果传来一级分类时，二级分类不联动        //获取一级分类选中项的索引           var index=topClassName.selectedIndex;               alert("index",index);        //将secondClassName下的所有原有option移除          secondClassName.options.length=0;          //添加对应二级分类下拉列表          for(var i in secondClassNames[index]){              if('${B2bIntellmakeCapabilityInfo.secondClassName}'==secondClassNames[index][i])               {                    $("#secondClassName").append("<option value="+secondClassNames[index][i]+" selected='selected'>"+secondClassNames[index][i]+"</option>");              }             else{                    $("#secondClassName").append("<option value="+secondClassNames[index][i]+">"+secondClassNames[index][i]+"</option>");              }           }/*      $("#secondClassName").append("<option value='${B2bIntellmakeCapabilityInfo.secondClassName}'selected='selected'>"+'${B2bIntellmakeCapabilityInfo.secondClassName}'+"</option>");  */     p=0;    }    topClassName.onchange=createSecondClassNames;  //点击一级分类进行加载二级分类    }</script> <body>    <tr>                <th width="20%"><font color="red">*&nbsp;</font>分区: </th>                <td>                                  <select id="topClassName" name="topClassName"  value="$('#topClassName option:selected').val()"></select>                         <select id="secondClassName" name="secondClassName" value="$('#secondClassName option:selected').val()"></select>                      </td>    </tr></body>---------
阅读全文
0 0