關於bootstrap框架中select2的多選問題
1.類似普通select 標籤一樣
<select id="user_Level" class="form-control" multiple="multiple"> <option value="10">VIP</option> <option value="20">管理級別</option> <option value="30">成員</option></select>
唯一區別就是多啦 multiple="multiple" 這個屬性(用來標識該下拉選擇框是個多選的)
2.專案當中必須有引入外部js 和 css樣式
bootstrap-multiselect.js
網上都有實在找不到,直接聯絡我。
3.頁面需要新增js程式碼
//頁面載入完畢之後初始化該多選下拉框,以及設定預設選項
$(document).ready(function () { $("#user_Level").multiselect({ nonSelectedText:"-----請選擇代理人級別-----", buttonWidth:"100%" });
});
4.當選擇完畢如何獲取選中的值(我的是提交表單的事件中加如下js程式碼)
var str如果你選擇‘VIP’和‘管理人員’,那麼你的 str=“10,20”以字串形式拼接,傳遞後臺之後處理(儲存資料庫)= ""; $("#user_Level option:selected").each(function () { if (str != "") { str += ","; } str += $(this).val(); });
5.當編輯該選項的時候資料的回顯也是一個問題
我沒有想出更好的辦法所以在資料回顯的時候我在標籤上加了id
<select id="user_Level" class="form-control" multiple=我通過隱藏域拿到後臺的資料之後,我利用js做判斷比對"multiple" style="width: 100%;height: 100%"> <option id="o1" value="10">VIP</option> <option id="o2" value="20">管理級別</option> <option id="o3" value="30">成員</option></select>
$(document).ready(function () {
//通過隱藏域id獲取到後臺傳遞的值 和select標籤值對比選中 var user_l = $("#u_level").val(); if(user_l == '*'){ $("#o1").attr("selected","selected"); $("#o2").attr("selected","selected"); $("#o3").attr("selected","selected"); }else if(user_l == '10,20'){ $("#o1").attr("selected","selected"); $("#o2").attr("selected","selected"); }else if(user_l == '20,30'){ $("#o2").attr("selected","selected"); $("#o3").attr("selected","selected"); }else if(user_l == '10'){ $("#o1").attr("selected","selected"); }else if(user_l == '20'){ $("#o2").attr("selected","selected"); }else if(user_l == '30'){ $("#o3").attr("selected","selected"); }
//然後在初始化這個多選標籤 $("#user_Level").multiselect({ nonSelectedText:"-----請選擇代理人級別-----", buttonWidth:"100%" });
});最好獲取選中的值方法和上面一致,如果有更好資料回顯的建議請留言或者聯絡我謝謝!
相關推薦
關於bootstrap框架中select2的多選問題
1.類似普通select 標籤一樣 <select id="user_Level" class="form-control" multiple="multiple"> <o
Bootstrap Table中的多選框刪除
先上程式碼,後面再進行詳細解釋: // 刪除按鈕事件 $("#remove").on("click", function () { // $("#table").bootstrapTable('getSelections');為boo
bootstrap table 行內編輯 select2 多選問題
bootstrap table 行內編輯Select2多選 需要修改bootstrap-editable.js原始碼的itemsByValue方法 當多選時,回傳類似 ",1,2,3"的字串,需要轉
簡單響應式Bootstrap框架中文官網頁面模板
str 頁面 nbsp 中文 技術分享 http images bsp ots 鏈接:http://pan.baidu.com/s/1o7MQ6RC 密碼:kee5簡單響應式Bootstrap框架中文官網頁面模板
在Bootstrap框架中,form-control的效果
bootstrap 使用 ots ron 效果 如果 成了 control 就是 在Bootstrap框架中,通過定制了一個類名`form-control`,也就是說,如果這幾個元素使用了類名“form-control”,將會實現一些設計上的定制效果。 1、寬度變成了100
在DBGrid中實現多選功能。
inter cli 如何實現 point row goto option pointer checked 1、首先把DBGrid->options-dgMulitSelect設為True. dgRowSelect也設為True,此屬性設為true後,DBGrid將不
select2多選下拉功能
AngularJS完成select2多選下拉功能 1、引入js及css資源 2、頁面新增select標籤 1、引入js及css資源 <script src="../plugins/angularjs/angul
在SSH框架中,多個持久層物件相互引用,從而引發分頁查詢中,查詢所得的持久化物件轉換為JSON字串報錯的原因及解決方案
引言: 使用EasyUI框架的小夥伴們都知道,在使用datagrid(資料表格)時,會傳入如一個URL,用於請求資料表格中的所顯示的資料: <!--建立一個空表格--> <table id="mytable"></table>
MVC身份驗證.MVC過濾器.MVC6關鍵字Task,Async.前端模擬表單驗證,提交.自定義匿名集合.Edge匯出到Excel.BootstrapTree樹狀選單的全選和反選.bootstrap可搜尋可多選可全選下拉框
在寫這篇部落格之前要嘮叨幾句.本人已從事開發四年有餘.從前兩年的熱情如火.到現在的麻木.總感覺要像上突破.卻又不敢輕舉妄動. 沒事就寫點基礎程式碼.指點下新人吧 1.MVC身份驗證. 有兩種方式.一個是傳統的所有控制器繼承自定義Control,然後再裡面用MVC的過濾器攔截.所以每次網站的後臺被訪問時.
select2多選設定select多選,select2取值和賦值
select2設定select多選,select2取值和賦值,作為篩選條件的時候,取值相對簡單,把選中的id值轉為字串傳給後端查詢,查詢之後會重新整理頁面,為了在下拉框中顯示剛剛選中的值,就需要給select賦值,可以將剛才傳給後端的字串再傳回前端,然後轉為一位陣列,再賦值給select2就會顯
(轉)select2多選框無法手動排序問題
select2是一個不錯的選擇框外掛,支援單選、多選、AJAX等,還有豐富的介面,官網是 https://select2.org/ 常用的樣式效果圖如下: 在一個專案中,我使用了它的AJAX搜尋和選擇,但發現一個問題,專案需要對選擇的內容保留它新增時相應的排序,比如one/t
select2多選
人工 提交 代碼 select src sel 註意 png 圖1 在TCX_1710項目中的拒絕代碼配置頁面可以選擇多個拒絕字段,效果圖如下 代碼中需要註意的有以下地方:圖1為提交保存時對多選數據的獲取,圖2為修改是對多選數據的回顯 對於多選框寬度太窄的問題,
Bootstrap-select下拉多選獲取選中的資料
剛好用到bootstrap-select外掛,遇到問題: 1.如何把選中的人員[名字+id]獲取到? 2.後臺要求的是json格式的資料,如何處理? 3.前端用el表示式在jsp中綁定了<select><option>,把id綁到哪個位置方便獲取?(
基於bootstrap的multselect左右多選多
1,控制元件官網文件: http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/#documentation 2,頁面基本結構 <div class="row">
使用位運算,處理資料庫中的"多選狀態標識"
引言【摘自其他文章】: 最近在對公司以前的一個專案進行調整時發現,資料庫中有很多表示“多選狀態標識”的欄位。“多選狀態標識”可能描述的並不十分準確,在這裡用我們專案中的幾個例子進行說明一下。 例一:表示某個商家是否支援多種會員卡打折(如有金卡
在ReactNative中封裝多選框控制元件
1. 第三方元件的安裝 在ReactNative工程的命令列下安裝 npm i react-native-check-box –save 2. 本地控制元件的封裝 2.1 i
thinkPHP5中獲取多選按鈕的值的方法
HTML頁面部分: <input type="checkbox" name="teachers[]" value="王老師" /> <input type="checkbox" name="teachers[]" value="張老師"/&
C#中comboBox下拉框中實現多選
譯者注:本方法和用checkbox, listbox等控制元件和事件拼湊出來的不同,本方法基本實現了控制元件的順滑度,下拉框可懸浮等效果,可以認為是comboBox的升級版,使用方便,僅需引用編譯好的DLL,直接在toolBox拖拽出控制元件即可。 簡介 在工作中,我需
在資料庫中實現多選
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;us
【java web】springMVC框架實現用多選框批量刪除表資料功能
本功能是基於springMVC+mybatis框架實現的,實現過程如下: jsp程式碼: <c:forEach items="${requestScope.movies}" var="movie" varStatus="status"> <