JS与Jquery之动态添加下拉框select并级联改变事件

需求描述：

1.可以动态添加多个下拉框,可减少下拉框
2.选中第一个下拉框的任意一个值，同时第三个下拉框的值跟着改变，显示对应的数据。

ps:what?光动态添加就足以。。。。赋值还不能直接赋，而是添加下拉时就赋值。。。。。经过百般折磨，头发掉了n根，最终通过巧妙的思路解决了，在此记录下。若对你有所帮助，点赞加关注吧！后续及时更新。

效果显示：

第一个下拉选项显示

效果显示1

选择下拉项，同时加载数据到第三个下拉框

效果显示2
选择不同的下拉项，第三个下拉框中显示不同的数据
效果显示3

HTML标签：

注：在这里直接去掉了第二行的标签

 <div class="name reviewLevel" style="margin-top: 5px;margin-bottom: 5px">
           <span id="checkLevel">
               <label style="font-size: 15px;" class="lab">审核层级:</label>
                <select name="reviewLevel" class="reviewLevelAdd" id="reviewLevelAdd0" onchange="changeReviewLevel(this.id)" style="width: 80px;height: 28px">
                    <option value=""></option>
                    <option value="集团">集团</option>
                    <option value="群">群</option>
                    <option value="处">处</option>
                    <option value="部">部</option>
                    <option value="课">课</option>
                    <option value="组">组</option>
                </select>      
           </span>
                <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="addCheckLine(1)" id="addLine"
                   style="width:28px">+</a>
                <a href="javascript:void(0)" class="easyui-linkbutton c6" onclick="addCheckLine(2)" id="reduceLine"
                   style="width:28px">-</a>
            </div>
            <div class="name" style="margin-top: 5px;margin-bottom: 5px">
               <span id="checkDept">
                <label style="font-size: 15px;" class="lab">审核单位:</label>
                 <select name="reviewDept" class="reviewDeptAdd" style="width: 80px;height: 28px"></select>
              </span>
            </div>

添加行删除行

   function addCheckLine(num) {
          //添加行
        if (num === 1) {
            count++;
            var ids="reviewLevelAdd"+count;
            var idsType="reviewTypeAdd"+count;
            var idsDept="reviewDeptAdd"+count;
            console.log("ids:"+ids);
            var reviewLevel = "  <select name=\"reviewLevel\" class=\"reviewLevelAdd\" id="+ids+"  onChange=\"changeReviewLevel(this.id)\" style=\"width: 80px;height: 28px\">\n" +
                "                    <option value=\"\"></option>\n" +
                "                    <option value=\"集团\">集团</option>\n" +
                "                    <option value=\"群\">群</option>\n" +
                "                    <option value=\"处\">处</option>\n" +
                "                    <option value=\"部\">部</option>\n" +
                "                    <option value=\"课\">课</option>\n" +
                "                    <option value=\"组\">组</option>\n" +
                "                </select>";
            $('#checkLevel').append(reviewLevel);

            var reviewDept1="  <select  name=\"reviewDept\" class=\"reviewDeptAdd\" id="+idsDept+" style=\"width: 80px;height: 28px\">\n" +
                                 "                </select>";
             $('#checkDept').append(reviewDept1);
        } else if (num === 2) {
          //删除行,保留一个下拉框
            if (count >0) {
                $('#checkLevel select:last,#checkType select:last,#checkDept select:last').remove();
                count--;
            } else {
                count = 0;
            }
        }
    }

请求数据

为了获取改变数据的行，试了很久，动态生成的下拉框无法获取到索引，所以才想到了使用id，并且给id后加一个数字

  function  changeReviewLevel(id){
        var reviewDept;
        var checkDept;
        var objIndex=id.charAt(id.length-1);  //截取最后一位获得索引，如id=reviewLevelAdd1
                $.ajax({
                    url: "queryData.do",
                    type: "post",
                    data: {},
                    dataType: "json",
                    success: function (data) {
                        getData(id,reviewDept,checkDept,objIndex,data);
                 }
            });
    }

给下拉框赋值

  function getData(id,reviewDept,checkDept,objIndex,data){
        //获取checkDept 中的文本，判断是否有值，如有清空数据
       var text=$("#checkDept select").find("option:selected").text();
        if (text!==null&&text!==''){
            $('#checkDept select').eq(objIndex).find("option").remove();
        }

        if ($("#"+id).val() === "集团") {
            for (var j = 0; j <data.groupNameList.length; j++) {
                checkDept = data.groupNameList[j].groupName;
                reviewDept = "<option value='" + checkDept + "'>" + checkDept + "</option>";
                $(reviewDept).appendTo($('#checkDept select').eq(objIndex));
            }
        }else if ($("#"+id).val() == "群"){
            for (var j = 0; j <data.bgList.length; j++) {
                checkDept = data.bgList[j].bg;
                reviewDept = "<option value='" + checkDept + "'>" + checkDept + "</option>";
                $(reviewDept).appendTo($('#checkDept select').eq(objIndex));
            }
        }
        }