项目用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>
小白还求高手指教
$(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);
});
上面写死的地方做个for循环
是在弹出的窗口页面做下拉列表吗,在窗口的jsp页面中用Ajax,不知道Ajax自己去百度,这个太基础了。不知道多百度比在这问好多了,又不是什么很难的问题。