jQuery实现动态加载select下拉列表项功能示例


Posted in jQuery onMay 31, 2018

本文实例讲述了jQuery实现动态加载select下拉列表项功能。分享给大家供大家参考,具体如下:

需求说明:

以前使用的select下拉列表都是静态的,select 的option数据都是写死的。现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据。

代码部分:

下面步骤介绍了如何从数据库获取数据,并动态的在前端显示。

步骤一:jsp页面静态的select:

<div>
 <select id="selectSM">
  <option>选择A</option>
  <option>选择B</option>
  <option>选择C</option>
 </select>
</div>

注意:

1、静态的select在某些场景下使用是没有问题的。但是在产品不同的需求时,动态select更能胜任其多样性。

2、select有多种写法,这里是最简单的。

步骤二:jQuery通过ajax请求获取动态的数据,并在jsp页面显示。

function IninDepart(){
 $("#selectSM").remove();//清空select列表数据
 var state = 1;
 $.ajax({
  type : "POST",
  url : "<%=basePath%>/getItemDepartList.do",
  dataType : "JSON",
  data : {},
 success : function(msg)
 {
  $("#selectSM").prepend("<option value='0'>请选择</option>");//添加第一个option值
  for (var i = 0; i < msg.rows.length; i++) {
  //如果在select中传递其他参数,可以在option 的value属性中添加参数
  //$("#selectSM").append("<option value='"+msg.rows[i].id+"'>"+msg.rows[i]+"</option>");
  $("#selectSM").append("<option>"+msg.rows[i]+"</option>");
 }
 },error:function(){
 alertLayer("获取数据失败","error");
 }
 });
}

注意:这里使用的是jQuery、ajax,其他方式也可以实现。

步骤三:后台数据的处理。

public JSONObject getItemDepartList(HttpServletRequest request) throws Exception{
 //查询select数据
 List<Map<String, Object>> list = appServices.getAppList();
 System.out.println("list::::::::" + list);
 //获取数据存放到数组
 String[] depart = null;
 for (Map<String, Object> map : list) {
  for (String k : map.keySet()) {
   depart = ((String) map.get(k)).split(",");
   System.out.println("depart::::::::" + depart);
  }
 }
 //去除数组中重复数据,存放到list
 List<String> strList = new ArrayList<String>();
 for (int i=0; i<depart.length; i++) {
  if(!strList.contains(depart[i])) {
   strList.add(depart[i]);
  }
 }
 System.out.println("strList::::::::" + strList);
 jsonObject.put("rows", strList);
 return jsonObject;
}

注意:由于后台返回数据的问题,需要对数据进行截取并去除重复数据。如果没有这个需求,可以直接向前端返回一个数组或list即可。下面是不同数据的控制台输出:

list::::::::[{service_depart=A,B,C,D,E,A,C,D,D,E}]
depart::::::::[Ljava.lang.String;@41fc702b
strList::::::::[A, B, C, D, E]

步骤四:sql查询语句,这里是把不同字段的值进行拼接,返回到controller中的list中。

SELECT GROUP_CONCAT(DISTINCT CONCAT(字段名称)) AS 字段名称或别名 FROM 表名

步骤五:这里捎带说一下,如何获取select下拉列表选择的值

//select 的change事件用了获取下拉列表的值
$(document).on("change","#selectSM",function(){
  //获取选择的值
  var condition = $(this).val();
  //其他操作
});

总结:

不同的需求对应着不同的数据处理和显示方式。以及不同的代码实现方式这里介绍我自己的观点。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery实现轮播图特效
Apr 12 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
You might like
PHP的5个安全措施小结
2012/07/17 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python妙用之编码的转换详解
2017/04/21 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python实现整数的二进制循环移位
2019/03/08 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python使用Geany编辑器配置方法
2020/02/21 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
自我评价如何写好?
2014/01/05 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
教务处教学工作总结
2015/08/10 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
python 详解turtle画爱心代码
2022/02/15 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js