需求
需要做一个下拉框组件，要求包含下拉列表前加一个多选框，勾选的列在下次打开时自动排在下拉列表前面置顶，点击列表中某一项，可以选中该项内容，并填充进展示框中，另外需要增加搜索功能，便于筛选下拉列表中的列。
分析
首先多选框，选用jquery自带的input类别为checkbox属性的多选框，处理点击事件，选中和取消选中，分别处理input的checkbox属性即可。
当确认多选框选中状态后，将选中的列内容存入数组，并将该数组存入localstorage。
再次打开下拉框的时候，从localstorage中取出存入的数组，遍历下拉框中各项内容，与该数组做对比，删除掉不重合的部分，再将该数组与得到的数组合并得到一个新的数组，最后将此数组按顺序分别赋值到下拉框中的各项内容。使完成排序需求。
另外，点击列表某一项，将选中内容填充展示框，可以直接在下拉框各列内容区域增加点击事件，处理内容填充到展示框即可。
最后，搜索功能，用一个input框，通过keyup事件，获取input每次输入的值，并与下拉框中的内容做对比，将包含该值的列筛选出来展示。
注意点：
主要是多种功能结合，在取值和筛选值的时候要注意原始值要发生变化，要保持随时更新值。
代码块
html
<div style="width:170px;position:relative;">
<div class="jd-select form-control" style="width:170px;"></div>
<div class="jd-select-cont">
<input type="text" class="search-input" placeholder="搜索" />
<ul>
<li class="jd-li">
<input type="checkbox" class=" checkbox-jd pull-left" value="1" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类1</span>
</li>
<li class="jd-li">
<input type="checkbox" class="checkbox-jd pull-left" value="2" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类2</span>
</li>
<li class="jd-li">
<input type="checkbox" class="checkbox-jd pull-left" value="3" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类3</span>
</li>
<li class="jd-li">
<input type="checkbox" class="checkbox-jd pull-left" value="4" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类4</span>
</li>
<li class="jd-li">
<input type="checkbox" class="checkbox-jd pull-left" value="5" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">品类5</span>
</li>
</ul>
<div class="btn-cont">
<div class="sure-btn" id="sure-btn">确定</div>
<div class="cancel-btn" id="cancel-btn">取消</div>
</div>
</div>
</div>
jquery部分
var arrC;
var varrC;
var arrcheckd;
var varrcheckd;
var arrRecord;
var varrRecord;
var arr;
var varr;
var arrSearch;
var arrSearchChecked;
var varrSearch;
var varrSearchChecked;
$(document).ready(function() {
arrC = new Array();
varrC = new Array();
arrcheckd = new Array();
varrcheckd = new Array();
arrcheckd = localStorage.getItem("arrcheckd");
varrcheckd = localStorage.getItem("varrcheckd");
arrRecord;
varrRecord;
arr = new Array();
varr = new Array();
if(arrcheckd) {
arrRecord = arrcheckd.split(",");
varrRecord = varrcheckd.split(",");
} else {
arrRecord = new Array();
varrRecord = new Array();
}
$(".jd-select-cont ul li span").each(function() {
var op = $(this).text();
if($.inArray(op, arrRecord) == -1) {
arr.push(op);
varr.push($(this).prev("input").val());
}
});
arr = arrRecord.concat(arr);
varr = varrRecord.concat(varr);
});
//点击多选框事件
$("body").on('click', ".checkbox-jd", function() {
if($(this).prop("checked")) {
$(this).prop("checked");
arrRecord.push($(this).next(".type-name").html());
varrRecord.push($(this).val());
} else {
$(this).removeProp("checked");
arrRecord.splice($.inArray($(this).next(".type-name").html(), arrRecord), 1);
varrRecord.splice($.inArray($(this).val(), varrRecord), 1);
}
});
//点击保存多选框事件
$("#sure-btn").click(function() {
$(".jd-select-cont").hide();
console.log("arrRecord.length===" + arrRecord.length)
window.localStorage.setItem("arrcheckd", arrRecord.toString()); //存数据
window.localStorage.setItem("varrcheckd", varrRecord.toString()); //存数据
});
//点击取消保存多选框事件
$(".cancel-btn").click(function() {
$(".jd-select-cont").hide();
});
//点击展开下拉列表并排序
$(".jd-select").click(function() {
$(".jd-select-cont").show();
$(".search-input").val("");
searchJD("");
//搜索
arrSearch = new Array();
arrSearchChecked = new Array();
varrSearch = new Array();
varrSearchChecked = new Array();
$(".search-input").keyup(function() {
var searchValue = $(".search-input").val();
searchJD(searchValue);
});
});
function showAll() {
var arrNew = new Array();
var varrNew = new Array();
for(var i = 0; i < arr.length; i++) {
if($.inArray(arr[i], arrRecord) == -1) {
arrNew.push(arr[i]);
varrNew.push(varr[i]);
}
};
arrNew = arrRecord.concat(arrNew);
varrNew = varrRecord.concat(varrNew);
var html = '';
for(var i = 0; i < arrRecord.length; i++) {
html += '<li class="jd-li"><input type="checkbox" checked class=" checkbox-jd pull-left" value="' + varrNew[i] + '" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrNew[i] + '</span></li>';
}
for(var j = arrRecord.length; j < arrNew.length; j++) {
html += '<li class="jd-li"><input type="checkbox" class=" checkbox-jd pull-left" value="' + varrNew[j] + '" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrNew[j] + '</span></li>';
}
$(".jd-select-cont ul").html(html);
};
function searchJD(searchValue) {
if(searchValue == "") {
showAll();
return;
} else {
arrSearch = new Array()
arrSearchChecked = new Array();
var arrNew = new Array();
varrSearch = new Array()
varrSearchChecked = new Array();
var varrNew = new Array();
for(var i = 0; i < arr.length; i++) {
if($.inArray(arr[i], arrRecord) == -1) {
arrNew.push(arr[i]);
varrNew.push(varr[i]);
}
};
arrNew = arrRecord.concat(arrNew);
varrNew = varrRecord.concat(varrNew);
for(var i = 0; i < arrNew.length; i++) {
if(arrNew[i].indexOf(searchValue) != -1) {
arrSearch.push(arrNew[i]);
varrSearch.push(varrNew[i]);
if(i < arrRecord.length) {
arrSearchChecked.push(arrNew[i]);
varrSearchChecked.push(varrNew[i]);
}
}
}
var html = '';
for(var i = 0; i < arrSearchChecked.length; i++) {
html += '<li class="jd-li"><input type="checkbox" checked class=" checkbox-jd pull-left" value="' + varrSearchChecked[i] + '" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrSearchChecked[i] + '</span></li>';
}
for(var j = arrSearchChecked.length; j < arrSearch.length; j++) {
html += '<li class="jd-li"><input type="checkbox" class=" checkbox-jd pull-left" value="' + varrSearch[j] + '" style="width:22px;height:30px;margin:0;" /><span class="type-name pull-left">' + arrSearch[j] + '</span></li>';
}
$(".jd-select-cont ul").html(html);
};
};
//点击选中下拉框中某一项
$("body").on('click', ".type-name", function() {
$(".jd-select").html($(this).html());
$(".jd-select-cont").hide();
alert($(this).prev("input").val());
});
css部分
.jd-select {
position: relative;
}
.jd-select-cont {
display: none;
position: absolute;
left: 0;
top: 33px;
width: 170px;
height: 280px;
background: #FFFFFF;
border: 1px solid #E1E1E1;
.search-input{
width: 170px;
height: 28px;
line-height: 28px;
border: 1px solid #eee;
}
ul {
width: 100%;
height: 210px;
overflow: overlay;
li {
display: block !important;
width: 100% !important;
height: 30px;
.type-name {
display: block;
width: 70%;
height: 30px;
line-height: 30px;
}
}
}
.btn-cont {
width: 100%;
height: 30px;
padding: 10px 20px;
.sure-btn {
width: 50px;
height: 20px;
line-height: 20px;
float: left;
background: #4990E2;
color: #fff;
font-size: 12px;
text-align: center;
border-radius: 4px;
}
.cancel-btn {
width: 50px;
height: 20px;
line-height: 20px;
float: left;
border-radius: 4px;
border: 1px solid #4990E2;
color: #4990E2;
text-align: center;
margin-left: 27px;
}
}
}
效果图
111.png
小结：代码写的略乱，主要用作自我笔记，方便下次遇到该需求，能较快找到解决方法。
