按值排序選擇下拉列表，而不是文本在javascript

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/2"
• 1 1/4"
• 1"
• 2 1/2"
• 2 「
• 3/4」

• 3「

  我想對它進行排序，如：

• 東

• 北

• 南

• 西

• 其他

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>