效果图:
前端代码
1,这里使用的是easyui框架,class="easyui-combobox"定义下拉框样式
2,data-options="multiple:true"意味着对下拉框参数多选,没有设定则默认单选
3,${y.taskname}表示下拉框所要获取的value子段
<label style="padding:5px 10px 0px 20px;">任务名称 </label>
<select name="taskname" id="taskname" class="easyui-combobox" style="width: 160px; height: 25px;" data-options="multiple:true">
<c:forEach items="${list1}" var="y" varStatus="status">
<option value="${y.taskname}">${y.taskname}</option>
</c:forEach>
</select>
后端代码
1,在数据库中表cbhs查询下拉框要显示的值
2,使用model.addAttribute(“list1”, list1);向前台传递数据,前端使用${list1}获取
@RequestMapping("/searchpage")
public String getPage(Model model) {
String sql1 = "select distinct taskname from cbhs";
List<Map<String, Object>> list1=jdbcTemplate.queryForList(sql1);
model.addAttribute("list1", list1);
return "cwhsconfig/costApportionSearch";//前端的页面路径
}
前端代码
1,这样就处理好了样式,因为我这个下拉框是查询功能的条件参数选值,所以但选择好值之后,就要在前端页面对获取的值进行初步的处理,对字段进行了判断并使用逗号间隔各个值
2,weidatagrid1是自定义的数据网格
var tasknames = $("#taskname").combobox("getValues");
var tasknamestr ='';
if (tasknames&&tasknames!='') {
var tmpStr='';
var arr = tasknames.join(',').split(',');
for (var i = 0; i < arr.length; i++) {
if(arr[i]!=''){
if(tmpStr==''){
tmpStr=tmpStr+arr[i];
}else {
tmpStr=tmpStr+","+arr[i];
}
}
}
if(tmpStr!=''){
tasknamestr =tmpStr;
}
}
var fieldValues = {};
fieldValues.taskname=tasknamestr;
$.ajax({
type: 'post',
async: false,
data: fieldValues,
url: "/page/getList?rdm=" + parseInt(Math.random() * 100000),//后端路径
dataType: 'JSON',
success: function (dataremote) {
$('#weidatagrid1').datagrid("loadData", dataremote.commonPage.resultlist);
}
});
后端代码
1,这里就将前端下拉框的选值使用split函数又变为了字符串数组,后面的随着自己需求进行修改取用
@RequestMapping(value = "getList")
@ResponseBody
public HashMap<String, Object> getList(@RequestParam HashMap<String, Object> param) {
String[] tasknames=param.get("taskname").toString().split(",");
String tasknamestr="";
for (int i = 0; i <tasknames.length ; i++) {
tasknamestr+="'"+tasknames[i]+"',";
}
}
来源:CSDN
作者:Aimyone
链接:https://blog.csdn.net/qq_36636312/article/details/104799705