jquery插件chosen多选时排序问题

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();
    });

修改后效果如下：

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