我需要按字母顺序对下拉列表进行排序,然后按前缀排序。
我要排序的前缀是“ b:”,所以任何以“ b:”开头的内容都应在底部。
<select id="dropdown">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">b: option 1</option>
<option value="5">b: option 2</option>
<option value="6">c</option>
</select>
这是理想的最终结果:
<select id="dropdown">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="6">c</option>
<option value="4">b: option 1</option>
<option value="5">b: option 2</option>
</select>
我使用以下JavaScript代码进行字母排序:
$("#dropdown option").sort(function(a,b) {
var at = $(a).text();
var bt = $(b).text();
return (at > bt)?1:((at < bt)?-1:0);
}).appendTo("#dropdown");
输出:
<select id="dropdown">
<option value="1">a</option>
<option value="2">b</option>
<option value="4">b: option 1</option>
<option value="5">b: option 2</option>
<option value="3">c</option>
<option value="6">c</option>
</select>
但是我仍然需要将“ b:”元素推到下拉列表的底部。我该如何实现?
这是jsfiddle链接
您可以添加另一个带有String#includes
前缀的支票,并获取支票的差额。
at.startsWith(prefix) - bt.startsWith(prefix)
var prefix = 'b:'
$("#dropdown option").sort(function(a, b) {
var at = $(a).text();
var bt = $(b).text();
return at.startsWith(prefix) - bt.startsWith(prefix) || at > bt || -(at < bt);
}).appendTo("#dropdown");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">b: option 1</option>
<option value="5">b: option 2</option>
<option value="6">c</option>
</select>
对于较旧的用户代理,您可以使用 String#indexOf
var prefix = 'b:'
$("#dropdown option").sort(function(a, b) {
var at = $(a).text();
var bt = $(b).text();
return !at.indexOf(prefix) - !bt.indexOf(prefix) || at > bt || -(at < bt);
}).appendTo("#dropdown");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">b: option 1</option>
<option value="5">b: option 2</option>
<option value="6">c</option>
</select>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句