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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery弹框插件使用方法详解
May 26 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP实现计算器小功能
2020/08/28 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
js实现数组转换成json
2015/06/26 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
原生js轮播特效
2017/05/18 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
python求解水仙花数的方法
2015/05/11 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python字符串三种格式化输出
2020/09/17 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
行政管理毕业生自荐信
2014/02/24 职场文书
车辆管理制度范本
2015/08/05 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB