您的位置:首页 > Web前端 > JQuery

如何获取 chosen chosen.jquery.js 选中的值

2016-11-09 11:12 288 查看
作为一款高级表单插件,chosen.jquery.js应该获得了不少的使用者,但在使用上可能会碰到不少问题,一个很重要的问题就在chosen select的取值上。

我们从页面引用chosen说起,

1).引用chosen.jquery.js

css:chosen.css,bootstrap.min.css?v=3.3.6,font-awesome.css?v=4.4.0

js:jquery.min.js?v=2.1.4,bootstrap.min.js?v=3.3.6,chosen.jquery.js

2).chosen 的html标签

<div class="form-group">
<label class="font-noraml">多选</label>
<div class="input-group">
<select id="cse" data-placeholder="选择省份" class="chosen-select" multiple style="width:350px;" tabindex="1" onchange="">
<option value="">请选择省份</option>
<option value="310000" hassubinfo="true">上海</option>
<option value="320000" hassubinfo="true">江苏省</option>
<option value="330000" hassubinfo="true">浙江省</option>
<option value="340000" hassubinfo="true">安徽省</option>
<option value="350000" hassubinfo="true">福建省</option>
<option value="990000" hassubinfo="true">海外</option>
</select>
</div>
</div>
3).初始化chosen

<pre name="code" class="javascript">var config = {
'.chosen-select': {},
'.chosen-select-deselect': {
allow_single_deselect: true
},
'.chosen-select-no-single': {
disable_search_threshold: 10
},
'.chosen-select-no-results': {
no_results_text: '找不到数据!'
},
'.chosen-select-width': {
width: "95%"
}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}


4).取值

<script language="javascript">
$(document).ready(function(){
//chosen初始化
//$(".chosen-select").chosen();
//多选select 数据同步
chose_get_ini('#cse');
//change 事件
$('#cse').change(function(){
alert(chose_get_value('#cse'));
//console.log(chose_get_value('#cse'));
alert(chose_get_value('#cse') + ' : '+ chose_get_text('#cse'));
});
});
//select 数据同步
function chose_get_ini(select){
$(select).chosen().change(function(){$(select).trigger("liszt:updated");});
}
//select value获取
function chose_get_value(select){
return $(select).val();
}
//select text获取,多选时请注意
function chose_get_text(select){
return $(select+" option:selected").text();
}
</script>

5).另
在对chosen的下拉框做数据初始化或者通过js给下拉框插入option之后都需要更新chosen:

$(select).trigger("liszt:updated");
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息