jquery插件chosen多选时排序问题

项目前端用到 bootstrap 框架，很多功能都是依赖 jquery 插件实现的。今天遇到一个需求：一个 input 中需要支持多选，并且选中的内容要按照所选择的顺序排序。

这种需求当然是先百度啦，最后找到了jquery 的一款插件：chosen.jquery.js 。貌似可以满足需求。

插件大家网上自己下载，以下是我项目中的引用：

<script src="/js/plugins/chosen/chosen.jquery.js"></script>

html如下：

<div class="form-group"> <label class="col-sm-3 control-label">名称：</label> <div class="col-sm-8"> <input id="projectIds" name="projectIds" style="width: 100%" class="form-control"> <select class="form-control chosen-select" multiple="multiple" data-placeholder="请选择名称" id="projectNames" name="projectNames" style="width:100%;display: inline-block"> </select> </div> </div>

以下是相关 js:

$(function () { // 加载项目名称 initProjectList(); $(".chosen-select").chosen({ maxHeight: 200, search_contains: true, no_results_text: '无结果匹配' }).change(function () { // 默认排序 $("#projectIds").val($(this).val()); }); }); // 加载项目名称 function initProjectList() { $.ajax({ type: "get", catch: false, url: '/project/getProjectList', async: false, dataType: "json", success: function (res) { if (res) { var html = ''; Object.keys(res).forEach(function (key) { html += '<option value="' + res[key].id + '">' +res[key].projectName+ '</option>'; }); $("#projectNames").append(html); } } }); }

好了，下面就是页面效果了：

多选的时候，选中的option的id也没有问题。

但是当我不按照顺序选择内容的时候，id 回显却是有顺序的，注意图中1，2中的顺序：

找了官方文档，没用看到有关于顺序这一块的参数配置（如果哪位朋友找到了，麻烦留言说一下，谢谢）。没办法，只能自己动手了，废话不多说，代码如下：

function reOrder(){ var projectIds_ = $("#projectIds").val(); // input id = projectIds 的取值 var projectNames_ = $("#projectNames").val(); // input id = projectNames 的取值 var resultIds = ""; // 如果已经全部删除，则清空 $("#projectIds") 的值 if(!projectNames_){ $("#projectIds").val(""); return; } if(projectIds_){ var arrProjectids = projectIds_.split(","); // 新增选中 for(var z=0;z<projectNames_.length;z++){ if(arrProjectids.indexOf(projectNames_[z]) < 0){ arrProjectids.push(projectNames_[z]); } } // 删除 for(var y = arrProjectids.length-1;y >= 0;y--){ if(projectNames_.indexOf(arrProjectids[y]) < 0){ arrProjectids.splice(y,1); } } // 回显id $("#projectIds").val(""); for(var x=0;x<arrProjectids.length;x++){ resultIds += arrProjectids[x]; resultIds += ","; } resultIds = resultIds.substring(0,resultIds.length-1); }else{ resultIds = $("#projectNames").val(); } $("#projectIds").val(resultIds); }

把change 事件中的方法替换一下就OK了：

$(".chosen-select").chosen({ maxHeight: 200, search_contains: true, no_results_text: '无结果匹配' }).change(function () { // 默认排序 // $("#projectIds").val($(this).val()); // 重新排序 reOrder(); });

修改后效果如下：

这肯定不是最好的解决办法，先记录一下~~