[jQuery] Unexpected append behavior

Charlie Thu, 10 Dec 2009 04:55:24 -0800

Creating a set of dropdowns for US states as follows:

$.getJSON("../js/stateListJSON.txt",function(data){
       $(data.statelist).each( function(i) {
               var stateAbbr = data.statelist[i].state;
               var stateName = data.statelist[i].name;
               $("#job_state").append("<option value=" +stateName + ">" +stateAbbr + "</option>");
       });
});

JSON excerpt
{"state":"MT","name":"Montana"},{"state":"NC","name":"North Carolina"}

HTML Output:
Single word states all append fine but 2 word states get inserted as:

<option carolina="" value="North">NC</option>

Using more efficient method of creating one string in the $.each and appending the whole string once after $each, or using $("#job_state").html(completeOptionString) resulted in same problem.
Only solution I found was append the option tags with no value and add the value using $("#job_state option:last").val(stateName)

What would cause the split of the 2 words and an attribute   carolina="" to be created?

[jQuery] Unexpected append behavior

Reply via email to