[jQuery] Converting JSON to html output

[jQuery] Converting JSON to html output


Hi,
I'm a jQuery and Javascript noob, and can't seem to get this to work.
The JSON output looks right to me via console.log(result), but the
select box isn't being populated. The select box needs to be populated
onfocus, because the interface is set up to allow the user to add new
options to the select via a popup without a page refresh.
$(function() {
$.getJSON('index.cfm?view=listReferenceJSON',
function(result,status) {
console.log(result)
var str = ''
for(var i=0; i < result.ROWCOUNT; i++) {
str+= '<option value="'+result.DATA.REFERENCEID[i]
+'">'+result.DATA.AUTHOR[i]+' ('+result.DATA.REFYEAR[i]+')<option>'
}
$("refSelectBox").bind('focus', function(event, ui) {
$("#refSelectBox").html(str)
}
});
});
<select id="refSelectBox"></select>
Thanks in advance for any help.
Nando