Google chrome dropdown list options ordering seems to be incorrect

I am using the following code for rendering a selec开发者_运维技巧t box in one of my form and when i inspects i can see the following code in Firefox

<select name="make">
    <option value="13501">Jeep</option>
    <option value="26838">Joyner</option>
    <option value="13658">Kia</option>
    <option value="13898">Lada</option>
</select>

But in chrome when i inspect the form element i can see

<select name="make">
    <option value="13501">Jeep</option>
    <option value="13658">Kia</option>
    <option value="13898">Lada</option>
    <option value="26838">Joyner</option>
</select>

Any one please suggest a solution for this?

It's not a real good practice but...

If you add a space to the value chrome will not consider value a number and won't sort them by value.

Example:

<select>
  <option value=" 3">Third</option>
  <option value=" 1">First</option>
  <option value=" 2">Second</option>
</select>

The good side is that you have not to add and then remove alphabetic characters from ID like someone suggested (don't remember if in this or other post with similar question), you could easily trim it but most of the times the space is just ignored and if you post or get those to another file they will simply see the integer value not the space.

This happens to me too. With the following client side JS:

var data=incoming_json_assoc_array_of_counties_sorted_alphabetically_by_county //eg 47=>"west midlands"
    for (key in data) {
        options.push('<option value="' + key + '">' + data[key]+ '</option>');
    }
    $('#county_id').val(options.join(''));

It seems like chrome will not support integers as property names or will sort by the key rather than the value. Irrespective of the value that the data comes in

This is a pain in the backside as most of my arrays are num=>data assoc arrays.

Please visit http://code.google.com/p/chromium/issues/detail?id=12169 for an explanation, still looking for a workaround/fix.

This doesn't do it in FF or even safari which is webkit based. Tried on PC and MAC chrome and get the same problem.

The other option I suppose is to render the HTML on the serverside and just use your JS to plonk the data into the .. tags as opposed to generating it client side.

[update] see Google Chrome: JavaScript associative arrays, evaluated out of sequence for good solid answer

[edit 2013] Apperently this still hasn't been fixed It's valid behaviour according to ECMAScript standards but it's not how one would 'expect' it to behave. Have you though of using chosen.js which could help you get around the problem.