html格式
<option>标签:就是value 属性规定在表单被提交时被发送到服务器的值。
第一个是fatherName
<select id="fatherName" οnchange="selectFN()" name="fatherName" class="equp_sel equp_sel4 " style="width: 150px;"> <option value="-1">选择模块</option> <option value="室内装修检查">室内装修检查</option> <option value="火灾和应急疏散">火灾和应急疏散</option> <option value="消防知识考核">消防知识考核</option> </select>
第二个是childName
<select id="checkTaskName" name="checkTaskName" class="equp_sel equp_sel4 " style="width: 150px;"> <option value="">请选择</option> <option value=""></option> </select>
下边就是js的编写了,js作用就是实现二级联动,并将选择的值取出来
function selectFN(){ var fatherName='' ; var fatherName1 = document.getElementById("fatherName") ; var checkTaskName = document.getElementById("checkTaskName") ; var taskName = [['选择任务'] ,['设计施工图纸','装修材料','用电','用火','消防应急设施'] ,['预案学习','视频学习','值班日志','现场演练视频上传'] ,['报警','使用设施、灭火器材','引导、帮助人员疏散','现场演练视频上传']]; for (i=0;i<fatherName1.length;i++){ if (fatherName1[i].selected == true){ fatherName = fatherName1[i].value ; } } //获取到底选择哪个模块 var index = fatherName1.selectedIndex; //通过角标到数组中获取相应任务 var cName = taskName[index]; //将联动后框的值清空 for(var x=0;x<checkTaskName.options.length;x++){ checkTaskName.removeChild(checkTaskName.options[x]) ; } checkTaskName.length = 0; var a=''; for(var i=0; i<cName.length; i++){ var oOptNode = document.createElement("option"); oOptNode.innerHTML = cName[i]; a=cName[i]; checkTaskName.appendChild(oOptNode); } }