Jquery-Select2控件使⽤⼼得
前段时间使⽤了Select2控件处理下拉菜单，搞了⼀整天才搞明⽩，记录下⼼得。参考官⽹
该控件我使⽤了两种⽅式：1、基本⽤法；2、AJAX⽤法。
先说第⼀个基本⽤法，该⽅式适⽤于⽐较⼩数据量时，⼀次把所有数据加载到template⾥边的<select>组件，然后由Select2对<select>进⾏解析，例如：
<select id="system" name="system" >
<option value="">请选择系统-------</option>
{% for sys in sys_list %}
<option value={{ sys.id }}>{{ sys.name }}</option>
{% endfor %}
</select>
<script>
  $(document).ready(function () {
    $("#system").select2();
  });
</script>
我使⽤了Django框架，数据以列表形式返回给前台，控件效果：
接下来是AJAX⽤法，可以分成两部分：后台数据源；前台设置。先说后台数据源部分，参考代码：
jquery获取下拉框选中值def ajax(request):
"""
AJAX数据源视图-系统模块
"""
start = int(('iDisplayStart', '0'))
length = int(('iDisplayLength', '30'))
search = ('sSearch', '')  #取得前台控件输⼊的关键字
if search:    #截取查询结果对象，以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:
val_list.append({'id': org.id, 'name': org.name})
  """
  根据关键字查询得到结果后开始拼装返回到前台的数据。先⽣成字典型数组，⼀般SELECT2组件使⽤的话⽣成id、name两个字段即可
  """
json_data = json.dumps(val_list)
return HttpResponse(json_data, 'application/json')
前台设置部分代码：
<script>
//机构⾃动搜索
function resultFormatResult(orgs) {      {# 下拉选项名称      #}
return '<div>' + orgs.name + '</div>';
}
function resultFormatSelection(orgs) {    {# 选取后显⽰的名称    #}
return orgs.name;
}
$(document).ready(function () {
$("#company").select2({
placeholder: "点击查询机构",
minimumInputLength: 2,  {# 最⼩查询参数    #}
multiple: flase,        {# 多选设置    #}
ajax: {
url: '/admin/organizations/ajax/',  {# ajax后台函数路径 #}
dataType: "json",  　{# 传输的数据类型，⼀般使⽤json或jsonp，jsonp⽐较复杂，需要APIKEY，暂时没进⾏研究 #}
type: "GET",      {# GET即为前台JS向后台函数取数据，POST反之 #}
quietMillis: 1000,  　{# 延时查询毫秒数 #}
data: function (term, page) {
return {
                  　sSearch: term, {# term为前台输⼊的查询关键字，保存到sSearch对象，即后台保存关键字的对象 #}
                  　page: 10  {# 每次查询的结果数 #}
};
},
results: function (data, page) {
return {
results: data  {# results结果集，data为后台返回的查询结果 #}
};
}
},
formatSelection: resultFormatSelection,  // 设定查询样式
formatResult: resultFormatResult,    // 设定查询结果样式
dropdownCssClass: "bigdrop",    　// 设定SELECT2下拉框样式，bigdrop样式并不在CSS⾥定义，暂时没深⼊研究
escapeMarkup: function (m) {
return m;
},
        initSelection: function (element, callback) {  {# 默认显⽰option项 #}
var compName = ElementById("companyName").value;var data = {name:compName};
callback(data); 
});
});
</script>
<div class="form-group {% s %} has-error{% endif %}">
<label class="col-sm-4 control-label">所属机构</label>
<div class="col-sm-6"><input id="company" name="company" type='hidden' class="populate placeholder"
value="{{ modify_company.id }}" required="True"/>
<input id="companyName" hidden="hidden" value="{{ modify_company.name }}"/>
</div>
</div>
⽣成的效果图
⼤概的说明看代码注释，initSelection这个参数要重点说下，当时纠结了好久。
我使⽤了⼀个隐藏的<input id="companyName">存放companyName，然后initSelection可以取其值来callback，然后可见的<input id="company">供Select2解析。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。