DropDown List Filled With getJSON Data Not Expanding
Greeting all-
I have a form with (in part) a text field, which uses jq autocomplete, and a select drop-down list. When a user enters/selects a code in the text field (autocomplete), a getJSON call is made to another script that retrieves data from the db and sends it back to the form. The data is used to populate the drop-down list. This works, in that I seem to get data back, but for some reason the drop-down list is not expanding when I click on it in FireFox.
This work great in IE versions 7,8 and 9.
In FireFox, I fire up FireBug >> Console >> All. I re-enter a code into the text box and select my code. I see the last call made in the FireBug window and expand the + symbol. I see all my JSON data that is/should be in the form. But, the drop-down list will not expand when I click on it.
Odd note: When I close FireBug and click on the drop-down list, it works. Very strange. Before I open FireBug, it won't work. During FireBug it won't work. Close FireBug and it works.
Here is my code for the to populate the drop-down list. Any ideas on what might be causing this bug in FF would be greatly appreciated.
function get_object_codes(nbr){
// get object codes
// blank out the list to prevent duplicate lists
$('#object_code' + nbr).html('');
if( $('#account'+nbr).val().match(/^(H0\d|h0\d|R12|r12|A06|a06|t70|T70)\d{4}/)){
// get object codes
$.getJSON("get-object-codes.html",{code:$('#account'+nbr).val(),frm:$('#frmChoice').val(),nbr:nbr}, function(data){
if( data.length > 0 ){
$('#object_code'+nbr).append("<option value=\" \" class='red'>Required</option>");
$.each(data, function(key, value){
// add object codes to drop down list
$('#object_code'+nbr).append("<option value=\""+value.OBJECT_CODE+"\">"+value.OBJECT_CODE+"-"+value.OBJECT_CODE_NAME+"</option>");
});
}
});
}
}
YankeeFan