jquery中select用法

Jquery-Select2控件使⽤⼼得

前段时间使⽤了Select2控件处理下拉菜单，搞了⼀整天才搞明⽩，记录下⼼得。参考官⽹

该控件我使⽤了两种⽅式：1、基本⽤法；2、AJAX⽤法。

先说第⼀个基本⽤法，该⽅式适⽤于⽐较⼩数据量时，⼀次把所有数据加载到template⾥边的组件，然后由Select2对进⾏

解析，例如：

请选择系统-------

{% for sys in sys_list %}

{{ }}

{% endfor %}

我使⽤了Django框架，数据以列表形式返回给前台，控件效果：

接下来是AJAX⽤法，可以分成两部分：后台数据源；前台设置。先说后台数据源部分，参考代码：

def ajax(request):

"""

AJAX数据源视图-系统模块

"""

start = int(request.GET.get('iDisplayStart', '0'))

length = int(request.GET.get('iDisplayLength', '30'))

search = request.GET.get('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': })

"""

根据关键字查询得到结果后开始拼装返回到前台的数据。先⽣成字典型数组，⼀般SELECT2组件使⽤的话⽣成id、name两个字段即可

Query获取Select选择的Text和Value:

语法解释：

1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发

2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

3. var checkValue=$("#select_id").val(); //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery设置Select选择的 Text和Value:

语法解释：

1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中

2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中

3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select的Option项：

语法解释：

1. $("#select_id").append("Text"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("请选择"); //为Select插入一个Option(第一个位置)

多选下拉框jquery.multiple.select的使⽤

介绍:多选下拉选择插件是jQuery插件选择复选框，多元素的。有单选、多选还有其他分组多选、过滤条件选择等等。

相关API及demo:/p/multiple-select/docs/#multiple-select

以下是项⽬中曾⽤的demo:

1.⾸先引⽤jquery.multiple.select.js、multiple-select.css

2.在页⾯select下拉列表⾥⾯加⼀个multiple="multiple"

${item.code}

3.在页⾯初始化的时候，要在js⾥⾯加⼀段代码:

<%--这个是默认选中的--%>

var numbusIps='${queryStormBaseConfInfo.nimbusHost}';

$('#nimbusHost').multipleSelect({

width: '300px',

single:true//单选，去掉single就是多选

}).multipleSelect('setSelects',[numbusIps]);

<%--这个是默认不选中的--%>

var numbusIps='${queryStormBaseConfInfo.nimbusHost}';

$('#nimbusHost').multipleSelect({

width: '300px',

single:true//单选，去掉single就是多选

});

4.提交的时候直接⽤var nimbusHost=$("#nimbusHost").val();就可以得到多选下拉框选中的值。

jquery-editable-select设置显⽰默认选项

在这篇博⽂中使⽤到了jquery-editable-select控件，这个控件既可以⼿动输⼊也可以⽤于下拉选择，类似MFC中的combobx控件，在特定场

景下⾮常⽅便。

下⾯将分享“如何解决页⾯加载时设置默认的显⽰选项”。

HTML结构

下⾯是html代码，说明了select元素信息和option内容。

可编辑的下拉选择控件

BMW

Form

Audi

如果是⼀般的select元素，以上html代码就可以完成；如果为了达到可编辑的效果，需要增加如下的JavaScript初始化代码：

$(document).ready(function() {

//初始化控件

$('#edit_id').editableSelect({

filter: false ,

});

})

设置默认值

对于⼀般的select元素，设置默认显⽰选项有两种⽅法：

⽅法⼀：

通过val()⽅法设置表单字段的值，JS代码如下：

$("#edit_id").val("Audi");

⽅法⼆：

通过设置option元素的selected属性，JS代码如下：

$("#edit_id > option[value="Audi"+]).attr("selected",true);

但对于可编辑的select元素，只能采⽤⽅法⼆；需要注意的是，如果我们的option项是动态添加的，需要按照以下步骤进⾏：

1. 动态添加option内容

2. 设置option元素的selected属性

3. 调⽤实例化控件函数

完整代码：

可编辑的下拉选择控件

BMW

Form

Audi