Bootstrap-select下拉多選獲取選中的資料
阿新 • • 發佈:2019-01-05
剛好用到bootstrap-select外掛,遇到問題:
1.如何把選中的人員[名字+id]獲取到?
2.後臺要求的是json格式的資料,如何處理?
3.前端用el表示式在jsp中綁定了<select><option>,把id綁到哪個位置方便獲取?(實際情況是綁到哪兒都不好獲取)
實現出來的樣式:
解決:1.JSP中繫結資料 順便把後臺返回的id綁到 option 的class屬性上去;
2.給select繫結一個onchange事件:<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>
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()方法要靈活很多,當然也有可能是對這個方法理解的不是很透徹。
繼續學習中。