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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
jQuery实现手风琴特效
Jan 11 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 保留字列表
2012/10/04 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python赋值操作方法分享
2013/03/23 Python
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python中的for循环
2018/09/28 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python实现简单银行管理系统
2019/10/25 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
安踏广告词改编版
2014/03/21 职场文书
保险公司年会主持词
2014/03/22 职场文书
文明班级建设方案
2014/05/15 职场文书
四年级学生期末评语
2014/12/26 职场文书
医院病假条怎么写
2015/08/17 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python