加载选择列表时(不是文档)在JQuery中用json数据填充选择列表 [英] populate selectlist with json data in JQuery when the selectlist is loaded (not the document)

问题描述

我在动态生成选择列表的表单上有一个按钮，该列表应该填充有json数据，我已正确提取所有json数据，我唯一的问题是钩住了selectlist的onload事件以填充本身带有数据，我知道我可以使用$('#itemID').fillSelectlist()来填充它，但问题是我的选择列表ID是动态生成的，我不知道一种像(($ ("#item" + itemNum +列表"))

我当前的代码如下:

$.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);
            }
        });
    }
});

}

我试图将其挂接到选择列表的加载上，像这样:

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

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

任何指针?

我的选择列表以html形式存储在页面中，并带有onload ="fillDDL"值，但如果我将脚本设置为执行$('#file1Category ').fillDDL在我的document.ready()脚本中触发但出错，所以我想我在扩展我的问题，以包括为什么onload无法正常工作以及是否应该使用另一种方法?

我的字段正像这样添加到表单中:

$('#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++;
});

解决方案

$(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);
     }
    });
  });
 });
});

糟糕.重新编写并修复.

此外，有一种插件用于此类操作 >

您必须将$("select")替换为仅选择所需列表的选择器.

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++;
});

解决方案

$(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.

这篇关于加载选择列表时(不是文档)在JQuery中用json数据填充选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！