RareClumsy 2017-06-07 07:04 采纳率: 0%
浏览 3838
已结题

Java新手求助,动态下拉列表

项目用LayUi框架+SpringMvc实现的

点击总体页面右侧的编辑按钮弹出Layui渲染的窗口(另一个jsp页),窗口中的下拉列表想做成从后端数据库表中查出的数据
图片说明

整体页:

 <fieldset class="layui-elem-field">
                <legend>诉讼指南列表</legend>
                <div class="layui-field-box layui-form">
                    <table class="layui-table admin-table">
                        <thead>
                            <tr>
                                <th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
                                <th>标题</th>
                                <th>日期</th>
                                <th>分类</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="content">
                        </tbody>
                    </table>
                </div>
            </fieldset>
            <div class="admin-table-page">
                <div id="paged" class="page">
                </div>
            </div>

        <script type="text/html" id="tpl">
            {{# layui.each(d.list, function(index, item){ }}
            <tr>
                <td><input type="checkbox" lay-skin="primary"></td>

                <td>{{ item.heading }}</td>
                <td>{{ item.dates }}</td>
                <td>{{ item.litigationguidesubmenu.litigationguidesubmenuname }}</td>
                <td>
                    <!-- 修改按钮 -->
                    <a href="javascript:;" data-gid="{{ item.gid }}" data-heading="{{ item.heading }}" data-straightmatter="{{ item.straightmatter }}" data-dates="{{ item.dates }}" data-opt="edit" class="layui-btn layui-btn-mini" id="update" onclick="edit(this)">编辑</a>
                    <a href="javascript:;" data-gid="{{ item.gid }}" data-opt="del" id="del" class="layui-btn layui-btn-danger layui-btn-mini" onclick="del(this)">删除</a>
                </td>
            </tr>
            {{# }); }}
        </script>
        <script type="text/javascript" src="${pageContext.request.contextPath }/plugins/layui/layui.js"></script>
        <script>
            layui.config({
                base: 'js/'
            });

            layui.use(['paging', 'form'], function() {
                var $ = layui.jquery,

                    paging = layui.paging(),
                    layerTips = parent.layer === undefined ? layui.layer : parent.layer, 
                    layer = layui.layer, 
                    form = layui.form();

                paging.init({
                    /* 省略查询代码 */
                    complate: function() { 

                    //点击编辑按钮弹出编辑窗口
                    $.post('view/LitigationGuide/forms/updateForm.jsp',{gid:$(this).data('gid'),heading:$(this).data('heading'),straightmatter:$(this).data('straightmatter'),dates:$(this).data('dates'),submenu:$(this).data('submenu')}, function(form) {
                        addBoxIndex = layer.open({
                            type: 1,
                            title: '修改诉讼指南',
                            content: form,
                            btn: ['保存', '取消'],
                            shade: false,
                            offset: ['100px', '30%'],
                            area: ['800px', '620px'],
                            zIndex: 19950924,
                            maxmin: true,
                            yes: function(index) {
                                //触发表单的提交事件
                                $('form.layui-form').find('button[lay-filter=edit]').click();
                            },
                            success: function(layero, index) {
                                //弹出窗口成功后渲染表单
                                var form = layui.form();
                                form.render();
                                form.on('submit(edit)', function(data) {
                                    //参数传入controller
                                    $.post('litigationguide/updateLitigationGuide.json',data.field,function(res){
                                        location.reload();
                                    });
                                    return false;                               
                                });
                            },
                            end: function() {
                                addBoxIndex = -1;
                            }
                        });
                    });
                });
                });
            },
    });
</script>

updateForm.jsp:

 <html>
    ...
    <body>
        <!--省略标题、正文、日期等...-->
        <div class="layui-form-item" style="width:200px; margin-left:110px;">
            <select name="fenlei" lay-verify="" >
                <option value="">请选择文章分类</option>
                <c:forEach items="${ 后台返回的集合 }" var="s">
                    <option value="${ s.id }">${ s.值 }</option>
                </c:forEach>
            </select>  
        </div> 
        ...
    </body>
    ...
</html> 

小白还求高手指教

  • 写回答

3条回答 默认 最新

  • xhl_2017 2017-06-07 07:27
    关注

    $(function(){
    var grade=$("#grade");
    grade.append("一年级"); //添加下拉列表
    grade.append("二年级");
    grade.append("三年级");
    $("四年级").appendTo(grade); //添加下拉列表
    $("").val("4").text("五年级").appendTo(grade); //添加下拉列表
    $("").val("5").text("六年级").prependTo(grade); //追加下拉列表到开头
    $("option[value='1']").remove(); //移除value值为1的下拉选项
    grade.val("2"); //设置默认的选中状态
    var maxGradeIndex=grade.find("option:last").attr("value"); //获取最后一个下拉选项的value值属性
    var gradeText=grade.find("option:first").text(); //获取最后一个下拉选项的文本内容
    //grade.empty(); //清空下拉列表选项
    grade.change(function(){
    alert($(this).find("option[value='3']").text());
    });
    alert(gradeText);
    });

    评论

报告相同问题?

悬赏问题

  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?