先給大家展示下效果圖：
除了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實現下拉框多選 jquery-multiselect 的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
