Current selected option not showing correctly

Question

Here is a jsFiddle demonstrating the issue. Look at when it's reordered. The main select="selected" is not selected. http://jsfiddle.net/zuuyj/

I have a select box, that im sorting using this script

$(document).ready(function () {
    var options = $('select.pca31 option');
    var arr = options.map(function(_, o) {
        return {
            t: $(o).text(),
            v: o.value
        };
    }).get();
    arr.sort(function(o1, o2) {
        return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
    });
    options.each(function(i, o) {
        console.log(i);
        o.value = arr[i].v;
        $(o).text(arr[i].t);
    });

This works fine until you have a selected option (Editing item) the selected option is not displayed as selected, because it reorders the list.

I tried this

$("select.pca31 option").empty().append( options );

Based on this

What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?

But I just get an infinite loop. I can see why, but I can't see how to fix it.

I implemented the solution you referenced as is in a [fiddle that seems to work](http://jsfiddle.net/VPCkR/). Is this not what you are looking to do? — dc5, Aug 17 '13 at 04:30
http://jsfiddle.net/zuuyj/ NOt when you reorder for sort alphabetically... it dosent "respect" the current selected.. — Jules Martinez, Aug 17 '13 at 04:42
Dc publish the answer so i can acept as the correct answ. THANKS SO MUCH!!! — Jules Martinez, Aug 17 '13 at 04:47
Or we can ask the mods to close this one as a duplicate of [What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?](http://stackoverflow.com/questions/45888/what-is-the-most-efficient-way-to-sort-an-html-selects-options-by-value-while) :) — dc5, Aug 17 '13 at 04:50

score 2 · Accepted Answer · edited May 23 '17 at 11:56

The solution that worked for the OP was to implement, as is, the answer from this post:

What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?

Code

var my_options = $(".pca31 option");

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0;
})

$(".pca31").empty().append( my_options );

HMR · Answer 2 · 2013-08-17T10:16:08.220

0

You can try this for your sort function:

var options = [].slice.call($('select.pca31 option'),0),
i,len;
options.sort(function(a,b){
  return (a.text > b.text)? 1 :
    (a.text < b.text)? -1 : 0;
});
for(i = 0,len=options.length;i<len;i++){
  $("select.pca31").append(options[i]);
}

edited Aug 17 '13 at 10:16

answered Aug 17 '13 at 04:48

HMR

37,593
24
91
160

you are declaring the variable `i` 3 times...this isn't good...just use the one line `var i = options.length-1;` – abc123 Aug 17 '13 at 05:34
Yes, copied and pasted wrong. There was some extra code. The other answer is shorter though, it appends the array in one go and sorts Jquery object directly. – HMR Aug 17 '13 at 05:42
agreed, now you don't declare `var i` even 1 time, so you are using an undefined variable...also you still have it on line two doing nothing... – abc123 Aug 17 '13 at 05:46

Current selected option not showing correctly

2 Answers2