html
1<select id="test">
2 <option value="Y">123</option>
3 <option value="s">def</option>
4 <option value="!">ghi</option>
5 <option value="e">abc</option>
6</select>
javascript
1(function($) {
2 $(function() {
3 var options = $("#test option");
4 var selected = $("option[selected]").val();
5 /*selectされているのをチェック。
6 チェックが複数ある場合は、また別の方法で...というか普通はひとつですよね?*/
7
8 options.attr("selected",false); /*ここでselect解除*/
9
10 var arr = options.map(function(i, o) {
11 return {
12 t: $(o).text(),
13 v: o.value
14 };
15 }).get();
16 arr.sort(function(o1, o2) {
17 return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
18 });
19 options.each(function(i, o) {
20 o.value = arr[i].v;
21 $(o).text(arr[i].t);
22 $(this).parent("select").val(selected); /*最初に選んでおいたセレクトを適用*/
23 });
24
25 });
26})(jQuery);
まずmapでoptionのオブジェクトを作って、そこにoptionのテキストとvalueを仕込みます。
var arr = options.map(function(i, o) {
return {
t: $(o).text(),
v: o.value
};
}).get();
get()にはindexが入ります。
[ { t: 123, v: Y}, { t: def, v: s} .... ]
こういう感じです。
で、arr.sort()でこれらのテキストを比較し、eachで配置します。
eachのoにはoptionタグのvalueが入ってます。
<option value="Y">
<option value="s">
<option value="!">
<option value="e">
こんな感じです。arr.sort()で並び替えたvalueをoptionタグのvalueに書き換えて、optionタグのtextを書き換えて完成です。
完成すると、optionのvalueの値が、
html
1<select id="test">
2 <option value="Y">123</option>
3 <option value="e">abc</option>
4 <option value="s">def</option>
5 <option value="!">ghi</option>
6</select>
こんな感じに「Yes!」となるようにしてみました。
ソートし終わったhtmlにはselectedが表示されていませんが、プロパティの方で入ってますので、まぁなんとか強引に形に持っていくと言う感じで。
###別の方法で最初のjavascriptソースを利用して
javascript
1(function($) {
2 $(function() {
3 var options = $("#test option");
4 var arr = options.map(function(i, o) {
5 return {
6 text: $(o).text(),
7 val: o.value,
8 sel: o.selected //true || false
9 };
10 }).get();
11
12 arr.sort(function(o1, o2) {
13 return o1.text > o2.text ? 1 : o1.text < o2.text ? -1 : 0;
14 });
15 options.each(function(i, o) {
16 o.value = arr[i].val;
17 $(o).text(arr[i].text);
18 o.selected = arr[i].sel;
19 if (o.selected) {
20 $(o).attr("selected",true);
21 } else {
22 $(o).attr("selected",false);
23 }
24 });
25
26 });
27})(jQuery);
まぁ、ひとまずって感じですけれども。