js二级联动并取出数据

2019独角兽企业重金招聘Python工程师标准>>>

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);
    }
}

转载于:https://my.oschina.net/bugkiller/blog/839356