populate selectlist with json data in JQuery when the selectlist is loaded (not the document)

Question

hey guys,

I have a button on a form that is dynamically spawning a select list, which is supposed to be populated with json data, i have all of the json data being pulled in correctly my only issue is hooking the selectlist's onload event to fill itself with data, i know i could use $('#itemID').fillSelectlist() to fill it but the problem is my select list ID's are dynamically generated and i don't know of a way to concat a select like ( $("#item" + itemNum + "list") )

my current code is below:

$.fn.fillSelect = function(data) {
return this.clearSelect().each(function() {
    if (this.tagName == 'SELECT') {
        var dropdownList = this;
        $.each(data, function(index, optionData) {
            var option = new Option(optionData.Text, optionData.Value);
            if ($.browser.msie) {
                dropdownList.add(option);
            }
            else {
                dropdownList.add(option, null);
            }
        });
    }
});

}

I was attempting to hook this up to the onload of a select list like so:

$.fn.FillDDL = function() {
$.getJSON("/Controller/GetFileCategories", null, function(data) {
    this.fillSelect(data);
});

<select id="file1Category" name="file1Category" class="form_input_small" onload="fillDDL"></select>

any pointers?

EDIT: my select lists are injected to the page as html stored in a jquery script with the onload="fillDDL" value but they aren't firing when they appear, if i set a script to do $('#file1Category').fillDDL in my document.ready() script it fires but errors, so I guess i am expanding my question to include why that onload isn't working and if there is another method i should be using?

EDIT2: my fields are being added to the form like so:

$('#moreFiles').click(function() {
    $("<div class='form_row'>" +
        "<div id='file" + FileCount + "row'>" +
        "<input type='button' class='form_input_small delete' value='X' onclick=\"$('#file" + FileCount + "row').empty()\" />" +
        "<label for='file" + FileCount + "File' class='form_label_small'>File</label>" +
     "<input type='file' class='form_input_small' name='file" + FileCount + "File' id='file" + FileCount + "File' />" +
     "<label for='file" + FileCount + "Category' class='form_label_small'>Category</label>" +
     "<select id='file" + FileCount + "Category' name='file" + FileCount + "Category' class='form_input_small'></select>" +
     "</div></div><br class='clear' />")
     .hide()
     .appendTo($('#fileDiv'))
     .fadeIn('fast');
    FileCount++;
});

Answer 1

looks like your capitalization may be off.

$.fn.FillDDL

vs

onload="fillDDL"

you could also do this:

<script type="text/javascript">
    $().ready(function() {
        $('#file1Category').FillDDL();
    });
</script>

Answer 2

$(function(){
 $.getJSON("/Controller/GetFileCategories", null, function(data) {
  $("select").each(function(){
    var dropdownList = this;
                $(dropdownList).clearSelect();
    $.each(data, function(index, optionData) {
     var option = new Option(optionData.Text, optionData.Value);
     if ($.browser.msie) {
       dropdownList.add(option);
     }
     else {
      dropdownList.add(option, null);
     }
    });
  });
 });
});

Edit: oops. rewrote and fixed.

Also, there's a plugin for this kind of thing

Edit: You'll have to replace $("select") with a selector that selects only the lists you want.

Answer 3

If your data looks like this:

var data = [{"Text":"file1","Value":1},{"Text":"file2","Value":2}];

then:

var str = "";
$.each(data, function(index, optionData) {
    str += "<option value=\"" + optionData.Value + "\">" + optionData.Text + "</option>";
});

then in your click handler can put

"<select>" + str + "</select>";

Might have to write window[str] instead of str so that it's global