本文探讨了多种实现多选下拉框的方法，包括原生HTML select元素、使用jQuery UI插件、wenzhixin_multiple-select库以及自定义解决方案。详细介绍了每种方法的实现代码和特点。
先发一下我想要的效果
大概就是这个样子。
原版
就是在select标签上添加multiple="multiple"属性，多选需要借助ctrl与shift键。写法简单，但是效果吗…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select multiple="multiple" style="width: 100px;">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
<option value ="4">4</option>
</select>
</body>
</html>
开玩笑一样的样式，真的有甲方能同意吗？
jquery.multiselect
下载地址：https://github.com/ehynds/jquery-ui-multiselect-widget
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/jmulti/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../../css/jmulti/prettify.css" />
<link rel="stylesheet" type="text/css" href="../../css/jmulti/style.css" />
<link rel="stylesheet" type="text/css" href="../../css/jmulti/jquery-ui.css" />
<script src="../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/jmulti/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/jmulti/jquery.multiselect.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/jmulti/prettify.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/jmulti/widget.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function() {
$("#select_users1").multiselect({
noneSelectedText: "",
checkAllText: "全选",
uncheckAllText: '全不选',
selectedList: 5
});
$("#select_users2").multiselect({
noneSelectedText: "",
checkAllText: "全选",
uncheckAllText: '全不选',
selectedList: 5
});
});
function ck(){
alert(jQuery("#select_users2").val());
}
</script>
</head>
<body>
<select name="Users" multiple="multiple" id="select_users1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="Users" multiple="multiple" id="select_users2">
<option value="1a">1a</option>
<option value="2a">2a</option>
<option value="3a">3a</option>
<option value="4a">4a</option>
<option value="5a">5a</option>
<option value="6a">6a</option>
<option value="7a">7a</option>
</select>
<input type="button" id="input1" value="test" onclick="ck();" />
</body>
</html>
效果
freejs .net
好像要收费的样子，没有仔细研究。
wenzhixin_multiple-select
https://github.com/wenzhixin/multiple-select
git上随便找的，好像挺简单的样子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/wenzhixin_multiple-select/multiple-select.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../../css/wenzhixin_multiple-select/multiple-select.css"/>
<style type="text/css">
select {
width: 500px;
}
</style>
</head>
<body>
<select multiple="multiple">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<input type="button" name="" id="" value="test" onclick="ck();" />
<script>
(function mounted() {
$('select').multipleSelect();
})();
function ck(){
alert($('select').val());
}
</script>
</body>
</html>
git上还有大量相关代码 https://github.com/search?q=multiple-select
自己写的
自用，修改方便，并且能避免各种各样的兼容问题。
通过查看大量代码，发现一般的套路就是，需要自己写一个正常select标签，然后调用某个方法，将select隐藏，并在下面生成由li组成的下拉列表。一般都是这样的格式
按照这种套路，写了一个（未添加css）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../../js/jquery/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 完全通过_yflag属性区分类别 -->
<div _yflag="multiDiv" id="testdiv1">
<input _ymultiId="id1" type="text" value="" _yflag="multiInput">
<!-- 可以回显 -->
<input _ymultiId="id1" type="hidden" value="1;2" _yflag="trueVal_multi" >
<div style="display: none;width: 200px;background: #FFFFFF;margin: -10px; padding: 0px;"
_yflag="multiSelectDiv">
<ul style="list-style-type:none;padding-left: 5px;">
<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="1" name="box_id1_Type" /><span _yflag="liShowDesc">aaaa</span></li>
<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="2" name="box_id1_Type" /><span _yflag="liShowDesc">bbbb</span></li>
</ul>
</div>
</div>
<div _yflag="multiDiv" id="testdiv2">
<input _ymultiId="id2" type="text" value="" _yflag="multiInput">
<input _ymultiId="id2" type="hidden" value="" _yflag="trueVal_multi" >
<div style="display: none;width: 200px;background: #FFFFFF;margin: -10px; padding: 0px;"
_yflag="multiSelectDiv">
<ul style="list-style-type:none;padding-left: 5px;">
<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="1" name="box_id1_Type" /><span _yflag="liShowDesc">aaaa</span></li>
<li _yflag="multiLi"><input _yflag="checkbox" type="checkbox" value="2" name="box_id1_Type" /><span _yflag="liShowDesc">bbbb</span></li>
</ul>
</div>
</div>
<input type="button" name="" id="" value="test" onclick="ck();" />
<script type="text/javascript">
jQuery("[_yflag='multiDiv']").click(function(event){
var ev = event || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelable = true;
}
jQuery(this).find("[_yflag='multiSelectDiv']").css("display","block");
});
jQuery(document).click(function(){
jQuery("[_yflag=multiSelectDiv]:visible").each(function(i){
refrashMultiDiv(jQuery(this).parent(), 'no');
});
jQuery("[_yflag=multiSelectDiv]").css("display","none");
});
function refrashMultiDiv(thisObj, isInit){
var valTemp = "";
var trueVal = thisObj.find("[_yflag='checkbox']:checked").each(function(i){
valTemp += jQuery(this).val() + ";";
});
if(valTemp)
valTemp = valTemp.substr(0, valTemp.length - 1);
if(isInit == 'yes'){
trueVal = thisObj.find("[_yflag='trueVal_multi']").val();
}else {
trueVal = valTemp;
}
if(!trueVal)
return clearThisObj(thisObj);
var valArr = trueVal && trueVal.split(";");
if(!valArr)
return clearThisObj(thisObj);
var showDesc = "";
var hideVal = "";
thisObj.find("[_yflag='multiLi']").each(function(i){
for(var j = 0; j < valArr.length; j++){
if(jQuery(this).find("[_yflag='checkbox']").val() == valArr[j]){
jQuery(this).find("[_yflag='checkbox']").attr("checked",true);
showDesc += jQuery(this).find("[_yflag='liShowDesc']").html() + ";";
hideVal += jQuery(this).find("[_yflag='checkbox']").val() + ";";
}
}
});
if(showDesc){
thisObj.find("[_yflag='multiInput']").val(showDesc.substr(0, showDesc.length - 1));
}
if(hideVal){
thisObj.find("[_yflag='trueVal_multi']").val(hideVal.substr(0, hideVal.length - 1));
}
}
function clearThisObj(thisObj){
thisObj.find("[_yflag='multiInput']").val("");
thisObj.find("[_yflag='trueVal_multi']").val("");
}
(function initMulti(){
jQuery("[_yflag='multiDiv']").each(function(i){
var thisObj = jQuery(this);
refrashMultiDiv(thisObj, 'yes');
});
})();
function ck(){
alert(jQuery("[_ymultiId='id1'][_yflag='trueVal_multi']").val());
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
