這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框多選 jquery-multiselect 的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

先給大家展示下效果圖：

除了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>

默認(rèn)選中值1，2，3，綁定指定的選項(xiàng)：

var strcondition = '1,2,3';

var ids = strcondition.split(',');

if (ids != null) {

$('#ddlConditions').val(ids);

$('#ddlConditions').multiselect("refresh");

}

獲取選中的多個(gè)值：

首先修改jquery.multiselect.js，添加全局變量multiValues ，用來存放選項(xiàng)值，然后修改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;

},

頁(yè)面使用此自定義方法，獲取選中值的代碼：

if ($('input[name=multiselect_ddlConditions]:checked').length < 1)

alert('Please Select Option');

else {

var strConditions = $("#ddlConditions").multiselect("MyValues");

}

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)下拉框多選 jquery-multiselect 的實(shí)例代碼，希望對(duì)大家有所幫助