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基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery实现推拉门效果
Oct 19 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
FCKeditor的安装(PHP)
2007/01/13 PHP
php adodb分页实现代码
2009/03/19 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
推荐dojo学习笔记
2007/03/24 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python数学形态学实例分析
2019/09/06 Python
python 绘制正态曲线的示例
2020/09/24 Python
python switch 实现多分支选择功能
2020/12/21 Python
Python中的面向接口编程示例详解
2021/01/17 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js