Bootstrap-select下拉多选获取选中的数据

最新推荐文章于 2024-10-09 09:00:00 发布

NotAfraidYfl

最新推荐文章于 2024-10-09 09:00:00 发布

阅读量1.5w

点赞数 1

分类专栏：前端实习-从基础做起文章标签：博客技术学习笔记 bootstrap-select

本文链接：https://blog.csdn.net/NotAfraidYfl/article/details/78803393

版权

前端实习-从基础做起专栏收录该内容

1 篇文章 0 订阅

订阅专栏

刚好用到bootstrap-select插件，遇到问题：

1.如何把选中的人员[名字+id]获取到？

2.后台要求的是json格式的数据，如何处理？

3.前端用el表达式在jsp中绑定了<select><option>，把id绑到哪个位置方便获取？(实际情况是绑到哪儿都不好获取)

实现出来的样式：

解决：1.JSP中绑定数据顺便把后台返回的id绑到 option 的class属性上去；

<select id="id_select" class="form-control selectpicker"
												name="staffDo" οnchange="getOptoions(this);" multiple
												data-live-search="true">
													<c:forEach items="${workers}" var="workers">
														<option value="${workers.staffName}"
															class="${workers.staffId}">${workers.staffName}【${workers.mobielTel}】</option>							</c:forEach>
											</select>

2.给select绑定一个onchange事件：

getOptoions(this);

3.检查插件生成的元素发现选中元素都会添加一个"selected"类名，则通过类名获取

//取出选择的任务执行人的方法
	function getOptoions() {
		var id = "", staffName = "", staffs = [], staffNameStr = "";
		//循环的取出插件选择的元素(通过是否添加了selected类名判断)
		for (var i = 0; i < $("li.selected").length; i++) {
			//通过选择器和筛选条件找到name和ID
			id = $("li.selected").eq(i).find("a").attr("class");
			staffNameStr = $("li.selected").eq(i).find(".text").text();
			//用来截取名字(去掉取出来的电话号码)
			staffName = staffNameStr.substring(0, staffNameStr.indexOf("【"));
			//以键值对的形式加到数组中去
			staffs.push({
				staffId : id,
				staffName : staffName
			});
		}
		//将包含对象的数组转换成json格式
		var staffStr = JSON.stringify(staffs);
		//赋值给隐藏的Input域
		if (staffStr.length > 0) {
			$("#taskStaffs").val(staffStr);
		} else {
			$("#taskStaffs").val("");
		}

	}

由于还有表单验证等一堆东西，先写到这儿自己记一下。
PS：这里发现for循环比.each()方法要灵活很多，当然也有可能是对这个方法理解的不是很透彻。

继续学习中。