jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
本文實(shí)例為大家分享了jquery.multiselect多選下拉框的實(shí)現(xiàn)方法,供大家參考,具體內(nèi)容如下
第一步:鏈接下列文件,如果沒有,到此網(wǎng)頁下載 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的基本文件都需要引用
<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/style.css" /> <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/prettify.css" /> <script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.min.js"></script> <script type="text/javascript" src="~/Scripts/jquerymultiselect/prettify.js"></script> <script type="text/javascript" src="~/Scripts/jquerymultiselect/jquery.multiselect.min.js"></script>
第二步:定義html代碼
<select name="Users" multiple="multiple" id="select_users"> @foreach (DModel.Model.User item in ViewBag.users) { if (Model.Users.Contains(item.Name)) { <option value="@item.Name" selected="selected">@item.Name</option> } else { <option value="@item.Name">@item.Name</option> } } </select>
第三步:加載插件渲染
<script> $(function () { $("#select_users").multiselect({ noneSelectedText: "==請(qǐng)選擇==", checkAllText: "全選", uncheckAllText: '全不選', selectedList: 5 }); }); </script>
第四步:刷新頁面查看效果
至此,基本完成。接下來是取值和賦值.
取值:$("#select_users").val() ;返回的是數(shù)組。因?yàn)槲疫@邊是用Ajax.BeginForm的前臺(tái)頁面,所以不需要取值
賦值:在第二步中已經(jīng)實(shí)現(xiàn)賦值,其他的賦值辦法沒有找到。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- bootstrap可編輯下拉框jquery.editable-select
- jQuery實(shí)現(xiàn)select下拉框獲取當(dāng)前選中文本、值、索引
- select下拉框插件jquery.editable-select詳解
- 利用jquery獲取select下拉框的值
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- jQuery操作select下拉框的text值和value值的方法
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- jQuery操作選中select下拉框的值代碼實(shí)例
相關(guān)文章
使用jquery判斷一個(gè)元素是否含有一個(gè)指定的類(class)實(shí)例
下面小編就為大家?guī)硪黄褂胘query判斷一個(gè)元素是否含有一個(gè)指定的類(class)實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02jquery 單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼
jquery單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼,需要的朋友可以參考下。2010-05-05jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下2018-07-07Tab頁界面,用jQuery及Ajax技術(shù)實(shí)現(xiàn)
從桌面開發(fā)的時(shí)代開始,Tab頁就是一個(gè)優(yōu)異的界面布局形式,兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點(diǎn)。2009-09-09jQuery簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法,可實(shí)現(xiàn)點(diǎn)擊底部鏈接動(dòng)態(tài)加載內(nèi)容的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03jquery實(shí)現(xiàn)html頁面先加載內(nèi)容過幾秒后顯示數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于jquery實(shí)現(xiàn)html頁面先加載內(nèi)容過幾秒后顯示數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07基于jQuery實(shí)現(xiàn)點(diǎn)擊彈出層實(shí)例代碼
基于jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果,其基本實(shí)現(xiàn)原理是這樣的:jquery操作DOM元素。對(duì)層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏;對(duì)jq點(diǎn)擊彈出層相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01