Jeesite下拉框的二级联动

最新推荐文章于 2020-12-03 17:16:39 发布

小猫多鱼、

最新推荐文章于 2020-12-03 17:16:39 发布

阅读量6.1k

点赞数 2

分类专栏： java js 文章标签： select 图片下拉框联动

本文链接：https://blog.youkuaiyun.com/u013733831/article/details/70456188

版权

java 同时被 2 个专栏收录

7 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了一个使用JSP实现的下拉框联动案例，详细展示了如何通过AJAX请求来更新第二个下拉框的内容。当用户选择第一个下拉框的选项时，将触发一个JavaScript函数findtemplate()，该函数会向服务器发送请求并动态填充第二个下拉框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说首先上图片
这里写图片描述
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;">
<%--                    <form:option value="" label="" /> --%>
                    <form:options 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;">
<%--                    <form:option value="" label="" /> --%>
                    <form:options 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[i].value;
                        var partName = msg[i].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("网络异常！");
        }
    });
}