Question

I would like to sort the below select options by their computed fractional value, excluding the –please select– option.

<select class="wpsc_select_variation">
<option value="0">-- Please Select --</option>
<option value="13">1"</option>
<option value="21">2''</option>
<option value="11">3/4"</option>
<option value="6">3/8"</option>
<option value="10">5/8"</option>
<option value="17">1-1/2''</option>
<option value="15">1-1/4''</option>
<option value="19">1-3/4''</option>
<option value="7">1/2"</option>
</select>

Code I’ve put together so far:
Added to pastebin for brevity and history’s sake.

Link

This would explain the length of the note 1 array being 3.
But why is it 3? Why isn’t it 9?
Why does Chrome show the full array, but still have a length of 3, and Firefox show the full array after clicking the parent +, but the parent says undefined, option, option?

Confused…

EDITS:
Edit to allow for multiple select boxes:
Correct me if I’m wrong.

$(".wpsc_select_variation").each(function(index, element){
        $($(element).children().get().sort(function (a, b) {
        return parseInt(a.value) - parseInt(b.value);
        })).appendTo($(element));
    });

Latest edit using objects.
Here goes:

var els = new Array();
var counter = 0;
$j("select.wpsc_select_variation option").each(function(index, ele){
var obj = new Object;
var i = $j(ele).text();
i = i.replace("\"", "");
i = i.replace("''", "");
if (i.indexOf("-") >= 0){
    i = i.split('-');
    split = i[1].split('/');
    i = eval(i[0]) + split[0] / split[1];
}
else if(i.indexOf("/") >= 0){
    split = i.split('/');
    i = split[0] / split[1];
}
i = eval(i);
obj.ind = i;
obj.ele = ele;
els[counter] = obj;
counter++;
});
els.sort(function (a, b) { return parseInt(a.ind) - parseInt(b.ind) });
console.log(els);

The above results in:

[Object { ind=NaN,  ele=option}, Object { ind=0.75,  ele=option}, Object { ind=0.375,  ele=option}, Object { ind=0.625,  ele=option}, Object { ind=0.5,  ele=option}, Object { ind=1,  ele=option}, Object { ind=1.5,  ele=option}, Object { ind=1.25,  ele=option}, Object { ind=1.75,  ele=option}, Object { ind=2,  ele=option}]

It appears to be sorting them somewhat, but as you can see, they are still out of order.

Answer 1

The following jsfiddle resolves this question. Credit goes to ExplosionPills for his general help and Kolink for helping me discover more about arrays. Thanks to vol7ron here:
Turning an array of jquery objects into html for his help with the functions.
Thanks guys!

function sortByRationalValue (a,b){
        return a.rationalValue - b.rationalValue;
    }
function returnObjectFromMeasurements(element, text) {
    var obj = {},
        range = text.replace(/["'”″]/g, '').split('-'),
        rational;

    if (range.length > 1)
        rational = eval(range[0]) + eval(range[1]);
    else
        rational = eval(range[0]);

    obj.rationalValue = rational;
    obj.element       = element;
    return obj;
}
jQuery(document).ready(function( $ ) {
    $(".wpsc_select_variation").each(function (index, element) {
        var els = new Array();
        var counter = 0;
        var children = $(element).children();
        $(children).each(function (index, ele) {
            els[index] = returnObjectFromMeasurements(ele, $(ele).text());
        });
        els.sort(sortByRationalValue);
        var elements = new Array();
        $.each(els, function (index, value) {
            elements[index] = value.element;
        });
        $(this).html(elements);
    });
});

http://jsfiddle.net/vwWJ3/5/