级联下拉框动态加载数据

下拉框级联效果图：

级联下拉框动态加载数据

JS代码：

+ 、- 号事件

           /**
             * 加号或减号事件
             * @param {Object} e
             */
            function changeDiv(e) {
                var ee = $(e);
                var parent = ee.parent();
                var name = ee.attr('name');
                var t = name.substring(1);
                var html = ee.html();
                var content = $('.accessMall').html();
                if (html == '+') {
                    //+
                    $('.accessMall').append('<div class="div' + (num / 2 + 1) + '"><select name="select' + (++num) + '" onchange="typeSelect(this)" class="form-control selectpicker" tabindex="-1" aria-hidden="true" data-live-search="true" data-width="150px" style="width: 150px;display:inline-block;"><option value="">--请选择--</option></select>&nbsp;&nbsp;<select name="select' + (++num) + '"  class="form-control selectpicker" tabindex="-1" aria-hidden="true" data-live-search="true" data-width="150px" style="width: 200px;display:inline-block;"><option value="">--请选择--</option></select><i style="font-style: normal; font-size: 20px; cursor:pointer;" name="i' + num / 2 + '" onclick="changeDiv(this)">+</i></div>');
                    $('select[name="select' + (num - 1) + '"]').empty();
                    $('i[name="i' + (num / 2 - 1) + '"]').html('-');
                    $('select[name="select1"] option').each(function () {
                        var html = $(this).html();
                        var value = $(this).val();
                        $('select[name="select' + (num - 1) + '"]').append("<option value='" + value + "'>" + html + "</option>");
                    })
                    $("select[name^='select']").selectpicker('refresh');
                } else {
                    //-
                    parent.empty();
                }
            }

            /**
             * 减号事件（旧数据）
             * @param {Object} e
             */
            function changeDivOld(e) {
                var ee = $(e);
                var parent = ee.parent();
                parent.empty();
            }

div:

            <div class="form-group" id="radios2" th:if="${admin}=='redstart_manag'">
                                                    <input type="hidden" id="accessMallVal" name="accessMallVal"
                                                           onchange="accessMallChange()">
                                                    <input type="hidden" id="accessMallType" name="accessMallType"
                                                           onchange="accessMallChange()">
                                                    <label class="control-label col-md-3">活动商场：</label>
                                                    <div class="col-xs-9">
                                                        <input type="radio" value="0" name="mallType"
                                                               onchange="initSelectData(this)"/>&nbsp;按区域
                                                        <input type="radio" value="1" name="mallType"
                                                               onchange="initSelectData(this)"/>&nbsp;按城市
                                                        <br/><br/>
                                                        <div class="accessMallOld">
                                                        </div>
                                                        <div class="accessMall">
                                                            <div class="div1">
                                                                <select name="select1"
                                                                        onchange="typeSelect(this)"
                                                                        class="form-control"
                                                                        style="width: 150px;display:inline-block;">
                                                                    <option value="">--请选择--</option>
                                                                </select>&nbsp;&nbsp;
                                                                <select name="select2"
                                                                        class="form-control"
                                                                        style="width: 200px;display:inline-block;">
                                                                    <option value="">--请选择--</option>
                                                                </select>
                                                                <i style="font-style: normal; font-size: 20px; cursor:pointer;"
                                                                   name="i1" onclick="changeDiv(this)">+</i>
                                                            </div>
                                                        </div>
                                                        <span id="accessMallTip" style="color: rgb(204, 0, 0);"
                                                              hidden="hidden">请选择活动商场</span>
                                                    </div>
                                                </div>

至于回显的数据无非是调用后台的方法，这里就不再赘述了。

思路：1.radio按钮为一个触发事件（点击城市，加载第一下拉框数据为省份；点击区域，加载第一个下拉框数据为区域）。

2. 点击第一下拉框触发事件（如果是省份去加载第二个下拉框对应的城市信息，如果是区域，加载第二个下拉框中对应的区域信息）。

级联下拉框动态加载数据

相关推荐