今天公司让我去优化一下老系统，是Jq框架的，有个需求优化是，将下拉框的数据改成多选框，并且有全选，再次点击之后取消全选。由于上一个开发的人跑路了，加上我本身对jq不太熟，这个小需求确实难到我了，先先后后百度查一下，都没有找到自己想要的答案。然后我就综合jq对 select 的操作，写了方法，最终解决了这个问题
话不多说，上代码
首先我们先来了解select的操作 jQuery获取Select选择的Text和Value:
-
$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发
-
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
-
var checkValue=$("#select_id").val(); //获取Select选择的Value
-
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
-
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery添加/删除Select的Option项：
-
$("#select_id").append("Text"); //为Select追加一个Option(下拉项)
-
$("#select_id").prepend("请选择"); //为Select插入一个Option(第一个位置)
-
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
-
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
-
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
-
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 原文链接：blog.csdn.net/liuzhaoyun/…
接下来看代码
html
<div class="col-sm-8" id="workNoListCheckBox">
<select class="form-control select2-hidden-accessible" name="workNoList" id="workNoListBox" multiple="" required >
<option value=""></option>
</select>
</div>
js
function selectWorkerByPrjCode() {
var prjCode = $("#prjCode").val();
var teamSysNo = $("#teamNo").val();
var workTypeCode = $("#workTypeCode").val();
if(prjCode){
var data = {
prjCode:prjCode,
teamSysNo:teamSysNo,
workTypeCode:workTypeCode
}
$.ajax({
url : ctx + "system/sysServerOrder/getOrderRecordByWorkerNo",
type : 'POST',
data:data,
success : function(data) {
var workNoList = data.data;
list = workNoList
workNoList.splice(0,0, {workNo: "00", workName:"全部"})
var workNoLists = $("#workNoListSelect").val();
var workNoListArr = [];
if(workNoLists){
workNoListArr = workNoLists.split(",");
}
var html = '';
for (var i = 0; i < workNoList.length; i++) {
var worker = workNoList[i];
if(workNoListArr.indexOf(worker.workNo)>-1){
html += '<option selected="selected" value="'+worker.workNo+'">'+worker.workName+'</option>'
}else{
html += '<option value="'+worker.workNo+'">'+worker.workName+'</option>'
}
}
$("#workNoListBox").html(html);
}
});
}
}
这里的js是取后端的数据来渲染option的value和text的值，这里注意了
后端返回的list是没有全部这个值，所以我们要自己加上去
select的选择事件
$('#workNoListBox').on('change',function (e) {
if($.inArray("00", $("#workNoListBox").val()) === -1) {
if ($.inArray("01", $("#workNoListBox").val()) === -1) {
} else {
for (var i = 0; i < document.edconfigform3.workNoList.length; i++) {
document.edconfigform3.workNoList.options[i].selected = false;
}
$("#workNoListBox").prepend("<option value='00'>全选</option>")
$("#workNoListBox option[value='01']").remove()
}
} else {
for (var i = 0; i < document.edconfigform3.workNoList.length; i++) {
document.edconfigform3.workNoList.options[i].selected = true;
}
$("#workNoListBox").prepend("<option value='01'>取消选择</option>")
$("#workNoListBox option[value='00']").remove()
}
})
这里我们通过选择事件，获取所选的option的数据，进行一个判断
$.inArray("00", $("#workNoListBox").val()) === -1
我们上面有讲{workNo: "00", workName:"全部"}是我们自己加上去的，而这个("#workNoListBox").val() 是否有这个 '00'的值，如果没有，也就是没有点击全选 则返回-1 ， 这里判断得到的是，他没有点这个全选， 那么我们就进行下一步判断
if ($.inArray("01", $("#workNoListBox").val()) === -1)
这里判断的是他有没有点击取消选择按钮（这里注意（01）是追加上去的一个option），如果没有，则进行的是常规的操作，如果有
for (var i = 0; i < document.edconfigform3.workNoList.length; i++) {
document.edconfigform3.workNoList.options[i].selected = false;
}
$("#workNoListBox").prepend("<option value='00'>全选</option>")
$("#workNoListBox option[value='01']").remove()
这里的js是取消select选中的值，至于document.edconfigform3.workNoList则是 edconfigform3就是你绑定的form 的id ，workNoList就是你的select的值，我们取消后的一个操作就是把取消选择这个option给去掉，然后把全选option追加回来，
else {
for (var i = 0; i < document.edconfigform3.workNoList.length; i++) {
document.edconfigform3.workNoList.options[i].selected = true;
}
$("#workNoListBox").prepend("<option value='01'>取消选择</option>")
$("#workNoListBox option[value='00']").remove()
}
同理，下面则是选中全选这个option之后的操作 然后就完美解决了
