欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

jQuery实现下拉框多选 jquery-multiselect 的实例代码

时间:2021-02-02 10:11:42|栏目:jquery|点击:

先给大家展示下效果图:

除了jquery,需要引用的样式和js文件:

<link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../assets/style.css" />
<link rel="stylesheet" type="text/css" href="../assets/prettify.css" />
<link href="../assets/jquery-ui.css" rel="stylesheet" />
<script src="../assets/jquery.js"></script>
<script src="../assets/jquery-ui.min.js"></script>
<script type="text/javascript" src="../assets/prettify.js"></script>
<script type="text/javascript" src="../assets/jquery.multiselect.js" charset=gb2312></script>

HTML代码:

<select title="Basic example" multiple="multiple" name="example-basic" size="5" id="ddlConditions">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select> 

默认选中值1,2,3,绑定指定的选项:

var strcondition = '1,2,3'; 
var ids = strcondition.split(','); 
if (ids != null) { 
$('#ddlConditions').val(ids);
$('#ddlConditions').multiselect("refresh"); 
}

获取选中的多个值:

首先修改jquery.multiselect.js,添加全局变量multiValues ,用来存放选项值,然后修改update方法,添加multiValues 那一行代码:

update: function() {
var o = this.options;
var $inputs = this.inputs;
var $checked = $inputs.filter(':checked');
var numChecked = $checked.length;
var value;
if(numChecked === 0) {
value = o.noneSelectedText;
} else {
if($.isFunction(o.selectedText)) {
value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
} else if(/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
value = $checked.map(function() { return $(this).next().html(); }).get().join(', ');
} else {
value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
}
multiValues = $checked.map(function () { return $(this).val(); }).get().join(',');
}
this._setButtonValue(value);
return value;
}, 

再添加自定义方法:

MyValues:function(){
return multiValues;
}, 

页面使用此自定义方法,获取选中值的代码:

if ($('input[name=multiselect_ddlConditions]:checked').length < 1)
alert('Please Select Option');
else {
var strConditions = $("#ddlConditions").multiselect("MyValues");
}

上一篇:JQuery给元素绑定click事件多次执行的解决方法

栏    目:jquery

下一篇:jQuery实现动画效果的实例代码

本文标题:jQuery实现下拉框多选 jquery-multiselect 的实例代码

本文地址:http://www.codeinn.net/misctech/55739.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有