如果选择了“ALL”选项，则jQuery Multi-select删除其他选定的选项

Question

我有这样的事情：

var myThing = {

   *... (some functions) ...*

   var callBack = $.Callbacks();
   callBack.add(myThing.populateSome);
   dataProvider.callWebService('/getMyHtml', 'GET', callback);
 });
},

populateSome : function(ids) {
   var myHtml = '';

   $.each(ids, function(index, ids) {
   myHtml += '<option value="'+ ids + '">' + ids + '</option>';
   });

   myHtml += '<option value="ALL">All Ids</option>';

   $(#initialList).html(myHtml);
   $(#initialList).multiselect();
   $(#List_to).html('');
   $(#List_to).multiselect();

   var callBack = $.Callbacks();
},

我正在执行一些 HTTP GET，它为我提供了 100、101、102、103 的 ID。

我的 JSP 部分代码：

...
<div class="form-group">
<span class="input-group-addon"><s:message code="send.some.label"/></span>
<span style="padding-left: 99px"></span>

<select id="initialList" name="ids" multiple="multiple" size="10" class="myselect"></select>
<div id="actionButtonMultiSelect" class="btn-group">
   <button id="List_rightSelected" class="btn"><b>&gt;</b></button>
   <div style="padding-top: 10px"></div>
   <button id="List_leftSelected" class="btn"><b>&lt;</b></button>
</div>
<select name="to" id="List_to" size="10" class="myselect" multiple></select>
</div>
<div style="padding-top: 20px"></div>
...

在我的 UI 屏幕中，两个区域出现了 initialList 和 List_to。当我选择 101 并移动它时，initialList 显示为：All Ids, 100, 102, 103 和 List_to 显示为：101

当我选择 100 并移动它时，initialList 显示为：All Ids, 102, 103 和 List_to 显示为：100, 101

从 List_to 中选择任何选项，（比如 101），它都会返回到我的原始列表。所以，我的 initialList 看起来像：All Ids, 101, 102, 103 和 List_to 看起来像：100

---

我想以这样的方式编码，当场景类似于：initialList 看起来像：All Ids, 102, 103 和 List_to 看起来像：100, 101时间> 现在如果用户选择All Ids，那么它 -> initialList 显示为：100, 101, 102, 103 并且 List_to 显示为：All Ids

Answer 1

您显示的代码并不代表不按顺序显示复选框值的 UI 显示，但似乎答案是在显示它们之前通过排序机制运行这些值。

在这里，我已经从字符串中分离出数字，对两者进行排序，然后按照您显示的格式将它们组合起来。

let values = ["99", "All Ids", "100", "102", "103", "101"];
let strings = values.filter(isNaN).sort((b, a) => b.localeCompare(a));
let sortedValues = values.filter(Number).sort((b, a) => b - a)
let list = `${sortedValues.join(", ")}`;
if (strings.length>0) list += ` --- ${strings.join(", ")}`
$('#results').html(list)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='results'></div>