Question

我在表单上有一个按钮，动态生成一个选择列表，应该用json数据填充，我已经正确地拉入了所有json数据我唯一的问题是挂钩selectlist的onload事件来填充本身有数据，我知道我可以使用$（'＃itemID'）。fillSelectlist（）填充它，但问题是我的选择列表ID是动态生成的，我不知道如何连接选择像（$ （“#item”+ itemNum +“list”））

我目前的代码如下：

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

}

我试图将其连接到选择列表的onload上，如下所示：

$.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存储在jquery脚本中，并带有onload =“fillDDL”值，但是当它们出现时它们不会触发，如果我设置了一个脚本来执行$（'＃file1Category '）.fillDDL在我的document.ready（）脚本中它会触发但是错误，所以我想我正在扩展我的问题以包括为什么onload不工作以及是否还有其他方法我应该使用？

EDIT2：我的字段正在添加到表单中，如下所示：

$('#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

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

编辑：oops。重写并修复。

此外，这种事情还有plugin

修改：您必须使用仅选择所需列表的选择器替换$（“select”）。

Answer 2

如果您的数据如下所示：

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

然后：

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

然后在你的点击处理程序中可以放

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

可能必须编写窗口[str]而不是str，以便它是全局的

Answer 3

看起来您的大写可能已关闭。

$.fn.FillDDL

vs

onload="fillDDL"

你也可以这样做：

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

加载选择列表时，在JQuery中使用json数据填充selectlist（不是文档）

3 个答案: