1. 程式人生 > >Bootstrap-select下拉多選獲取選中的資料

Bootstrap-select下拉多選獲取選中的資料

剛好用到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" onchange="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()方法要靈活很多,當然也有可能是對這個方法理解的不是很透徹。

繼續學習中。