Jquery Select2控制項使用心得

前段時間使用了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
>

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...