请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

jeesite

 找回密码
 注册新会员
查看: 292|回复: 1

[已解决] Jeesite下拉框的二级联动

[复制链接]
admin 发表于 2018-6-12 11:00:27 | 显示全部楼层 |阅读模式
Jeesite下拉框的二级联动

  1. https://www.waitig.com/jeesite%E4%B8%8B%E6%8B%89%E6%A1%86%E7%9A%84%E4%BA%8C%E7%BA%A7%E8%81%94%E5%8A%A8.html
复制代码






话不多说 首先上图片
这里写图片描述
JSP 页面代码 截图

第一个下拉框JSP代码

        <div class="control-group">
            <label class="control-label">离职类型:</label>
            <div class="controls">
                <form:select id="type" name="type" path="type" class="input-xlarge" onchange="findtemplate(this.options[this.options.selectedIndex].value);"
                    style="width:180px;">
<%--                    <formption value="" label="" /> --%>
                    <formptions items="${fns:getDictList('upl_type')}"
                        itemLabel="label" itemValue="value" htmlEscape="false" />
                </form:select>
            </div>
        </div>
第二个下拉框JSP代码

        <div class="control-group">
            <label class="control-label">选择模板:</label>
            <div class="controls">
                <form:select id="template" name="template" path="type" class="input-xlarge"
                    style="width:180px;">
<%--                    <formption value="" label="" /> --%>
                    <formptions id="wordTemplate" items="${fns:getDictList('upc_word')}"
                        itemLabel="label" itemValue="value" htmlEscape="false" />
                </form:select>
                <%--                <a href="${ctx}/sys/userdetail/upcform">导出模板</a> --%>
            </div>
        </div>
精髓部分为 第一个下拉框

onchange="findtemplate(this.options[this.options.selectedIndex].value);"
说明:findtemplate()为函数名称
this.options[this.options.selectedIndex].value 这句话能获取到第一个下拉框选择的值

JS代码部分:

function findtemplate(v) {
    $.ajax({
        type : "post",
        async : false,
        url : "getPostTemplateJson",
        data : {
            'type' : v
        },
        dataType : "json",
        success : function(msg) {
            $("#template").empty();
            //$("#template").select2();
            if (msg.length > 0) {
                for (var i = 0; i < msg.length; i++) {
                        var partId = msg.value;
                        var partName = msg.label;
                        var $option = $("<option>").attr({
                            "value" : partId
                        }).text(partName);
                        $("#template").append($option);
                }
                //$("#template option:first").prop("selected", 'selected');
                $("#template").change();

            }
        },
        error : function(json) {
            $.jBox.alert("网络异常!");
        }
    });
}
JS代码说明:
通过AJAX请求 后台数据 然后采取循环拼接的办法 构造下拉框的。 option。。
必要说明(“#下拉框”).empty(),为 jquey写法,必写。

$(“#下拉框”).change(); 这个change()函数 一定要写,否则有一个小bug。
这个bug是什么就不明说了,复制代码的兄弟 可以去掉试试效果。

这是个很细节的操作哦 。。。。。。。。。。。。。。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册新会员

本版积分规则

QQ|手机版|小黑屋|Archiver|jeesite 官方论坛. ( 吉ICP备12004769号  

GMT+8, 2018-9-20 16:41 , Processed in 0.140625 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表