使用原生js动态生成Select,根据前面的Select的option生成二级Select

使用原生JS动态生成Select,根据前面的Select的option生成二级Select

需求描述：

1. 后台数据会把第一层的Select的option数据 传递给前台页面，页面根据数据的有无创建第一个Select
2. 如果后台有数据，则根据第一个Select选中的option 下面是否有数据 生成第二个Select。当点击第一个个Select的option的时候会想后台发送数据请求，后台根据数据库的返回给前台。
3. 点击第二个Select的option的逻辑和点击第一个Select是一样的

4. 如果存在3个select，点击第一级的select中的某一个option，如果该option没有请求到数据，则第二个和第三个select会消失

   代码步骤

   在请求这个页面的时候就会查询出数据返回给当前的页面，页面是使用vm模版的，以下是使用的标签

   <div class="col-xs-4">                            <select id="rootId" onchange="getTypData()">                                <option>                                    ==请选择类型==                                </option>                                #foreach ($root in $!{roots})                                    <option id="${root.route}" name="${root.name}" value="$!{root.route}">                                        $!{root.name}                                    </option>                                #end                            </select>    </div>   </select>

监听Select的onChange事件，实现getTypeData()

function getTypData(route) {        var params = {};        if (typeof(route) == "undefined" || route.length == 0) {            var objS = document.getElementById("rootId");            var index = objS.selectedIndex;            if (index == 0) {                params.isNull = true;                params.route = objS.options[objS.selectedIndex + 1].id;            } else {                params.route = objS.options[objS.selectedIndex].id;            }        } else {            params.route = route;        }        var url = "/doceditor/nextParentType";        jQuery.ajax({            url: url,            type: "POST",            cache: false,            async: true,            dataType: "json",            data: params,            success: function (data) {                if (data != null && data.ok) {                    var types = data.context.types;                    var level = data.context.level;                    createSelect(types, level);                }            }, ajaxError: function () {                bapBase.alert("文本类型", "接口调用失败！");            },            complete: function () {                hideWaiting();                query();            },            beforeSend: function () {                showWaiting();            }        });    }

因为第一个option是 “ ==请选择类型==”所以不会携带参数过来，所以后台就会认定此前请求是第几层的第一个元素，此方法的作用就是为了点击option发送请求然后获取后台数据。判断是否生成下一个select。

在接收到数据之后就要考虑是否创建下一个select。实现createSelect()方法

function createSelect(types, level) {        //level 作为class的标记        if (types !== null && types !== undefined && types !== '' && types.length > 2) {            //获取父控件div            var divParentContext = document.getElementById("divContext");            //获取所有的子节点            var allDivChild = divParentContext.childNodes;            //获取当前div所在的下标            var index;            if (level != null && level.length > 0) {                //获取到当前的index                index = level;            } else {                //定义div,非创建的                index = 0;            }            //删除当前div以后的 div            for (var i = allDivChild.length, len = index; i > len; i--) {                divParentContext.removeChild(allDivChild[i - 1]);            }            //创建包裹select的div            var divChidContext = document.createElement("div");            var claz = "";            //拼接class的值            for (var i = 0; i < level; i++) {                claz = i;            }            divChidContext.setAttribute("class", claz);            //创建Select控件            var mySelect = document.createElement("select");            mySelect.setAttribute("class", claz);            //子div添加select            divChidContext.appendChild(mySelect);            //父div 添加子节点div            divParentContext.appendChild(divChidContext);            var type = JSON.parse(types);            var firstChild = new Option(" ==请选择类型==", "");            mySelect.options.add(firstChild);            for (var i in type) {                //创建slect的option                var optionChild = new Option(type[i].name, type[i].route);                mySelect.options.add(optionChild);            }            mySelect.addEventListener("change", function () {//onchange改为change                var index = this.selectedIndex; // 选中索引                var route = this.options[index].value; // 选中值                getTypData(route);            }, false);        } else if (types.length == 2) {            //获取父控件div            var divParentContext = document.getElementById("divContext");            //获取所有的子节点            var allDivChild = divParentContext.childNodes;            //获取当前div所在的下标            var index;            if (level != null && level.length > 0) {                //切割最后一个获取到当前的index                index = level;            } else {                //定义div,非创建的                index = 0;            }            //删除当前div以后的 div            for (var i = allDivChild.length, len = index; i > len; i--) {                divParentContext.removeChild(allDivChild[i - 1]);            }        }    }

逻辑很简单，就是判断type的有无，type是后台处理此次请求返回的数据，如果没有数据和有数据的两种处理方式。
1.有数据，就开始创建Select，创建逻辑也很简单，一层一层的创建，获取父div，在获取父div下所有的div，然后删除当前div以后的所有的div，然后在创建新的div,在div 里面创建select，在select里面填充携带的数据创建option.唯一特别的一点就是这个clazz,这个clazz，就是为了和type挂钩，能够清楚简单的获取到当前所处的div的位置，从而删除当前div以后的所有div。这个程序的唯一点就是这里。这个标识在后台已经定义好了，比如说，第一层的select的第一个option的clazz 就是1或者2或者3。点击第一个option请求数据，假如有数据则第二个select的clazz就是1-4，一次类推

不这样也可以，随便你只要每次请求有动态生成而且你知道的clazz就可以了

2.没有数据就认定这个是 “ ==请选择类型==”那就删除以后的div就可以了

本来没想写这个博客的，我自己的JS不是很熟练，而且也可以看出来，我不擅长使用JQury。之所以写是因为这个需求，因为网上基本上不是啥级联表什么的，就是使用ztree什么库就可以搞定的，如果你要是遇见我这样的需求，直接拿过去用，思路很简单，而且代码都是原生的js，不怕你看不懂