81,094
社区成员
发帖
与我相关
我的任务
分享下拉列表select 的 条件查询
根据下拉列表中的字段，条件查询，显示在原来的list页面
求 一个 用下拉列表 的查询 的实例 代码，当选中下拉列表中的字段时，list列表还在原来的地方显示，最好带注释
...全文
请发表友善的回复…
发表回复
zy_think123 2014-07-30
- 打赏
- 举报
Ajax出发事件的时候发送请求就行了，前台用用标签迭代出来就行了
fengyu_caihong 2014-07-30
- 打赏
- 举报
你用action控制获取新的条件查询集合存在session中在跳回原来的页面遍历不就可以了吗
a_king 2014-07-30
- 打赏
- 举报
既然你不是用AJAX作的，那么你查询完了重新生成页面的时候要重新展示那个下拉列表了
忘记呼吸 2014-07-30
- 打赏
- 举报
可以这样。下面的列表是一个iframe。
上面onchange的时候，调用ajax触发事件回填列表
C_phy 2014-07-30
- 打赏
- 举报
虽然我没有看懂是怎么做的，但是你很热心，等我有答案了会跟你分享的
fengyu_caihong 2014-07-30
- 打赏
- 举报
JS不用看~就是我这方法可能有点笨~~我也新手
fengyu_caihong 2014-07-30
- 打赏
- 举报
/**
* 获取联系人列表
*
* @param session
* @param model
* @param request
* @return
*/
@RequestMapping(value = "/contactsList")
public String contactsList(HttpSession session, Model model,
HttpServletRequest request,XzContacts contactsModel) {
// 跳转到添加页面之前先查询媒体信息,传递到前台显示下拉列表
List<XzMedia> mediaList = new ArrayList<XzMedia>();
mediaList = mediaService.getMediaList();
session.setAttribute("mediaList", mediaList);
// 跳转到页面之前先查询所有模块,传递到前台显示下拉列表
Set<String> palateList = new HashSet<String>();
palateList = service.getPlate();
palateList.remove("");
session.setAttribute("palateList", palateList);
List<XzContacts> list = new ArrayList<XzContacts>();
list = service.getContactsList();
session.setAttribute("contactsNameList", list);
String curPageStr = StringUtil.dealParam(request.getParameter("curPage"));
String pageSizeStr = StringUtil.dealParam(request.getParameter("pageSize"));
int curPage = 1;
int pageSize = 20;
if(curPageStr != null)
try {
curPage = Integer.parseInt(curPageStr);
} catch(NumberFormatException e) {
return "redirect:./cms/contacts/contactsList.oa";
}
if(pageSizeStr != null)
pageSize = Integer.parseInt(pageSizeStr);
contactsModel.setIndex((curPage-1)*pageSize);
contactsModel.setPageSize(pageSize);
list = service.getContactsListByPage(contactsModel);
PageResult<XzContacts> pageResult = new PageResult<XzContacts>(curPage, pageSize, service.getListCount(contactsModel), list);
model.addAttribute("statistic", service.getListCount(contactsModel));
model.addAttribute("pageresult", pageResult);
model.addAttribute("curPage", curPage);
model.addAttribute("pageSize", pageSize);
return "xz/cms/contacts/contacts_list";
}
<!DOCTYPE HTML>
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/mmboa/css/table.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.6.1.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/select2.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/js/select2.js"></script>
<script type="text/javascript">
function checkEvent2(){
var id = $("#allChecboxId")[0];
var boxClass = $(".checkboxClass");
if (id.checked == true) {
for(var i=0;i<boxClass.length;i++){
boxClass[i].checked = true;
}
}else{
for(var i=0;i<boxClass.length;i++){
boxClass[i].checked = false;
}
}
}
function exportExcel(){
var id="";
var boxClass = $(".checkboxClass");
for(var i=0;i<boxClass.length;i++){
if(boxClass[i].checked){
id+=$(boxClass[i]).val()+",";
}
}
if(id == null || id==""){
alert("请选择数据");
}else{
window.location.href='contactsDownload.oa?id='+id;
}
}
function show(id){
var _div=document.getElementById(id);
_div.style="";
}
function submitForm(){
var sub=document.getElementById('submit2');
sub.click();
}
function importExcel(){
var form=document.getElementById('form1');
var clientFile=document.getElementById('clientFile');
clientFile.click();
}
function checkSuccess(){
var check=document.getElementById('success');
var judgeSuccess=check.value;
if(judgeSuccess=="导入成功"){
alert("导入成功");
}
var check2=document.getElementById('errors');
var judgeErrors=check2.value;
if(judgeErrors!=null&&judgeErrors!=""){
alert(judgeErrors);
}
}
function hide(id){
var _div=document.getElementById(id);
_div.style="width: 80px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;";
}
function input(id) {
var s=$("#clientFile")[0];
var file = $("#clientFile").val();
var temp=null;
if (file == "") {
alert("请选择文件(Excel)")
return false;
}
var type = file.substring(file.lastIndexOf(".") + 1);
if (type != "xls" && type != "xlsx") {
alert("文件格式不正确！");
return false;
}
temp=file;
document.getElementById(id).value = temp;
}
function getContactsByMediaId(obj){
$.ajax({
url:"${pageContext.request.contextPath}/xz/cms/contacts/getContactsByMediaId.oa",
data:{"mediaId" : obj.value},
type:'post',
cache:false,
dataType:'json',
success:function(data) {
$('#contactsName').html('');
$('#contactsName').append('<option value="">请选择</option>');
for(var i=0;i<data.length;i++){
//alert(data[i].mediaSzType);
$('#contactsName').append('<option value="'+data[i].contactsName+'">'+data[i].contactsName+'</option>');
}
console.info(data);
},
error : function() {
// view("异常！");
alert("异常！");
}
});
}
</script>
<title>联系人列表</title>
</head>
<body onload="checkSuccess()">
<form method="post"
action="<c:url value='/xz/cms/contacts/contactsList.oa'/>">
<table width="95%" border="0" cellpadding="0" cellspacing="0"
class="gridtable">
<tr>
<th colspan="13" valign="top"><p align="center">联系人列表</p></th></tr><tr><td colspan="15">
<p align="left">
<input type="button" value="添加联系人"
onClick="window.location.href='addContactsUI.oa'">
<font
color="#FF0000">${fileError}</font><input type=button value="导入"
onClick="return importExcel()">
<input type="hidden" name="success" id="success" value="${success}" />
<input type="hidden" name="errors" id="errors" value="${errors}" />
<input type=button value="导出"
onClick="exportExcel()">
</p>
<p align="left">
所属媒体：
<select name="mediaId" id="mediaId" onchange="getContactsByMediaId(this);" style="width: 150px">
<option value="0">请选择</option>
<c:forEach items="${mediaList }" var="media" varStatus="i">
<option value="${media.id}">${media.mediaName}</option>
</c:forEach>
</select>
姓名：
<select name="contactsName" id="contactsName" style="width: 150px">
<option value=" ">请选择</option>
<c:forEach items="${contactsNameList }" var="contacts" varStatus="i">
<option value="${contacts.contactsName}">${contacts.contactsName}</option>
</c:forEach>
</select>
版块：
<select name="palate" id="palate" style="width: 150px">
<option value=" ">请选择</option>
<c:forEach items="${palateList }" var="palate" varStatus="i">
<option value="${palate}">${palate}</option>
</c:forEach>
</select>
<input type="submit" name="submit1" value="搜索" />
</tr>
<tr>
<th bgcolor="#9999CC"><div align="center">
全选<input type="checkbox" id="allChecboxId" name="allChecboxId" onclick="checkEvent2()" />
</div></th>
<th bgcolor="#9999CC"><div align="center">序号</div></th>
<th bgcolor="#9999CC"><div align="center">所属媒体</div></th>
<th bgcolor="#9999CC"><div align="center">姓名</div></th>
<th bgcolor="#9999CC"><div align="center">性别</div></th>
<th bgcolor="#9999CC"><div align="center">职位</div></th>
<th bgcolor="#9999CC"><div align="center">版块</div></th>
<th bgcolor="#9999CC"><div align="center">座机</div></th>
<th bgcolor="#9999CC"><div align="center">联系方式</div></th>
<th bgcolor="#9999CC"><div align="center">QQ</div></th>
<th bgcolor="#9999CC"><div align="center">微信</div></th>
<th bgcolor="#9999CC"><div align="center">邮箱</div></th>
<th bgcolor="#9999CC"><div align="center">操作</div></th>
</tr>
<c:forEach items="${pageresult.result }" var="contacts" varStatus="i">
<tr align="center">
<td><input type="checkbox" class="checkboxClass" name="checkboxId" id="checkboxId"
value="${contacts.id }" /></td>
<td>${i.index+1 }</td>
<td title="${contacts.mediaName }"><div id="1"
style="width: 80px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;"
>${contacts.mediaName }</div></td>
<td title="${contacts.contactsName}"><div id="1"
style="width: 80px; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden;"
>${contacts.contactsName}</div></td>
<td>${contacts.sex }</td>
<td>${contacts.position }</td>
<td>${contacts.palate }</td>
<td>${contacts.phone }</td>
<td>${contacts.contactway }</td>
<td>${contacts.qq }</td>
<td>${contacts.wechat }</td>
<td>${contacts.email }</td>
<td><a
href="<c:url value='/xz/cms/contacts/lookContacts.oa?id=${contacts.id }'/>">查看</a>
<a
href="<c:url value='/xz/cms/contacts/updateContactsUI.oa?id=${contacts.id }'/>">修改</a>
</td>
</tr>
</c:forEach>
</table>
<div style="width: 90%;"><%@ include
file="../../../pageResult.jsp"%></div>
</form>
<form action="<c:url value='/xz/cms/contacts/contactsUpload.oa'/>"
method="post" enctype="multipart/form-data" id="form1" name="form1">
<div style="display: none">
<input type="hidden" name="fileName" id="fileName" /> <input
type="file" name="clientFile" id="clientFile" onchange="submitForm();" />
<input type="submit" value="导入文件"
id="submit2" name="submit2" onclick="return input('fileName');" />
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$("#mediaId").select2();
});
$(document).ready(function() {
$("#contactsName").select2();
});
$(document).ready(function() {
$("#palate").select2();
});
</script>
</html>
