Jquery Select2控制項使用心得

2021-10-01 21:34:46 字數 2258 閱讀 7141

前段時間使用了select2控制項處理下拉列表,搞了一整天才搞明白,記錄下心得。參考官網

該控制項我使用了兩種方式:1、基本用法;2、ajax用法。

先說第乙個基本用法,該方式適用於比較小資料量時,一次把所有資料載入到template裡邊的元件,然後由select2對進行解析,例如:

<

select

id="system"

name

="system"

style

="width:100%"

>

<

option

value

="">請選擇系統-------

option

>

<

option

value

=}>}

option

>

select

>

<

script

>

$(document).ready(

function

() );

script

>

我使用了django框架,資料以列表形式返回給前台,控制項效果:

def

ajax(request):

"""ajax資料來源檢視-系統模組

"""start = int(request.get.get('

idisplaystart

', '0'

)) length = int(request.get.get('

idisplaylength

', '30'

)) search = request.get.get('

ssearch

', ''

) #取得前台控制項輸入的關鍵字

ifsearch:    #擷取查詢結果物件,以start開始擷取start+length位

orgs =info.objects.filter(

q(name__icontains=search) & q(deleted=false)

)[start:start +length]

else

: orgs = info.objects.all()[start:start +length]

val_list =

for org in

orgs:'id

': org.id, '

name

': org.name})

"""根據關鍵字查詢得到結果後開始拼裝返回到前台的資料。先生成字典型陣列,一般select2元件使用的話生成id、name兩個字段即可

')

前台設定部分**:

<

div

class

="form-group has-error"

>

<

label

class

="col-sm-4 control-label"

>所屬機構

label

>

<

div

class

="col-sm-6"

>

<

input

id="company"

name

="company"

type

='hidden'

style

="width:100%"

class

="populate placeholder"

value

="}"

required

="true"

/>

<

input

id="companyname"

hidden

="hidden"

value

="}"

/>

div>

div>

生成的效果圖

大概的說明看**注釋,initselection這個引數要重點說下,當時糾結了好久。

我使用了乙個隱藏的存放companyname,然後initselection可以取其值來callback,然後可見的供select2解析。

JQuery select控制項的相關操作

本文 於 jquery獲取和設定select選項方法彙總如下 獲取select 先看看下面 select id change function 為select新增事件,當選擇其中一項時觸發 var checktext select id find option selected text 獲取sel...

2 基礎控制項2

transform 的預設值為 1,0,0,1,0,0 nslog nsstringfrom 可以列印其他型別的 比如類 affine transform a ffine transform 的初始化為 make make 只能改變一次 不可重複改變 如果想要重複改變 則使用去掉 make 的方法t...

WPF控制項開發之控制項概述 2

更改控制項外觀 更改控制項的外觀以適應應用程式的外觀,這是很常見的操作。可以根據您要達到的效果,通過執行以下操作之一來更改控制項的外觀 更改控制項的屬性值。為控制項建立 style。為控制項建立新 controltemplate。更改控制項的屬性值 許多控制項具有允許您更改控制項外觀的屬性,例如 b...