jquery插件chosen多選時排序問題

項目前端用到 bootstrap 架構，很多功能都是依賴 jquery 插件實作的。今天遇到一個需求：一個 input 中需要支援多選，并且選中的内容要按照所選擇的順序排序。

這種需求當然是先百度啦，最後找到了jquery 的一款插件：chosen.jquery.js 。貌似可以滿足需求。

插件大家網上自己下載下傳，以下是我項目中的引用：

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

修改後效果如下：

這肯定不是最好的解決辦法，先記錄一下~~