Question

So I’m trying to populate a dropdown with the states, the value for the option should be the two characters value, and the text for the option should be the full state’s name, using the code below is returning a value of 0,1,2,3… and returning all the options in the var as the text.

var states = ["Select State","","Alabama","AL","Alaska","AK","Arizona","AZ","Arkansas","AR",...];
$.each(states, function(val, text) {
    $('#selector').append( $('<option> </option>').val(val).html(text) )
    });

Answer 1

Try this, using an object for states instead of an array. Same results, but it’s more clear what’s what and you’re less likely to have problems if you accidentally skip a name or abbreviation:

var states = {
    "Select State":"", 
    "Alabama":"AL", 
    "Alaska":"AK", 
    "Arizona":"AZ",  
    "Arkansas":"AR" 
};
var val, text;
for (text in states) {
    val = states[text];
    $('<option/>').val(val).text(text).appendTo($('#selector'));
};

http://jsfiddle.net/g59U4/