Question

我有2个选择下拉列表，我想按值对它们进行排序。我怎么能这样做？

<select id="select1">
  <option value="1-1/4">1 1/4"</option>
  <option value="1/2">1/2"</option>
  <option value="1">1"</option>
  <option value="2-1/2">2 1/2"</option>
  <option value="2">2"</option>
  <option value="3/4">3/4"</option>
  <option value=""3">3"</option>
</select>
<select id="select2">
  <option value="E">East</option>
  <option value="N">North</option>
  <option value="O">Other</option>
  <option value="S">South</option>
  <option value="W">West</option>
</select>

我想这样排序：

1 /＆＃34;
1 1/4＆＃34;
1＆＃34;
2 1/2＆＃34;
2＆＃34;
四分之三＆＃34;
3＆＃34;

我想把它排序为：
东
北
南
西
其他

Answer 1

HTMLSelectElement有options属性，类似于数组，所以我们可以从中获取选项，对它们进行排序，然后将它们添加回来：

setTimeout(display.bind(null, "2..."), 500);
setTimeout(display.bind(null, "1..."), 1000);
setTimeout(function() {
  sortSelect("select1");
  sortSelect("select2");
  display("Sorted");
}, 1500);

function sortSelect(id) {
  var sel = document.getElementById(id);
  var options = Array.prototype.slice.call(sel.options);
  sel.options.length = 0;
  options.sort(function(a, b) {
    return a.value.localeCompare(b.value);
  });
  options.forEach(function(opt) {
    sel.options.add(opt);
  });
}

function display(msg) {
  document.getElementById("display").innerHTML = msg;
}

<div id="display">3...</div>
<select id="select1" size=7>
  <option value="1-1/4">1 1/4"</option>
  <option value="1/2">1/2"</option>
  <option value="1">1"</option>
  <option value="2-1/2">2 1/2"</option>
  <option value="2">2"</option>
  <option value="3/4">3/4"</option>
  <option value="3&quot;">3"</option>
</select>
<select id="select2" size=5>
  <option value="E">East</option>
  <option value="N">North</option>
  <option value="O">Other</option>
  <option value="S">South</option>
  <option value="W">West</option>
</select>

按值排序选择下拉列表，而不是按javascript中的文本排序

1 个答案: