Javascript 动态填充下拉列表不'；行不通

我正在尝试动态填充下拉列表，但它不起作用。代码如下：

<form id="email-compose" class="form-email-compose" method="get" action="">
    <div class="form-group">
        <select id="input-to" class="input-transparent form-control">
        </select>
    </div>
    <div class="form-group">
        <input type="text" id="input-subject" placeholder="Subject" class="input-transparent form-control"
               value="<%= subject %>">
    </div>
    <div class="form-group">
        <textarea rows="10" class="form-control" id="wysiwyg" placeholder="Message"><%- body %></textarea>
    </div>
    <div class="clearfix">
        <div class="btn-toolbar pull-xs-right">
            <button type="reset" id="compose-discard-button" class="btn btn-gray">Annuler</button>
            <button type="submit" id="compose-send-button" onClick="sendMail()" class="btn btn-danger">&nbsp;&nbsp;&nbsp;Envoyer&nbsp;&nbsp;&nbsp;</button>
        </div>
    </div>
</form>

环空器
特使

以及相应的JS：

var jsonData = {
  "Table": [{
      "stateid": "2",
      "statename": "Texas"
  }, {
      "stateid": "3",
      "statename": "Louisiana"
  }, {
      "stateid": "4",
      "statename": "California"
  }, {
      "stateid": "5",
      "statename": "Nevada"
  }, {
      "stateid": "6",
      "statename": "Massachusetts"
  }]
};

 $(document).ready(function () {
     var listItems = '<option selected="selected" value="0">- Select -</option>';

  for (var i = 0; i < jsonData.Table.length; i++) {
         listItems += "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>";
     }
    console.log(listItems);
     $("#input-to").html(listItems);
 });

var jsonData={
“表格”：[{
“stateid”：“2”，
“州名”：“德克萨斯州”
}, {
“stateid”：“3”，
“州名”：“路易斯安那州”
}, {
“stateid”：“4”，
“州名”：“加利福尼亚州”
}, {
“stateid”：“5”，
“州名”：“内华达州”
}, {
“stateid”：“6”，
“州名”：“马萨诸塞州”
}]
};
$（文档）.ready（函数（）{
var listItems='-Select-'；
对于（var i=0；i

如果我手动插入选项标记，我可以在选择中正确地看到它们，但不能动态地看到它们。。。 我也尝试了.append方法，但仍然有一个空的下拉列表

有什么想法吗

编辑1：

我还尝试使用.append，如下所示：

$(document).ready(function () {
$('#input-to').append('<option selected="selected" value="0">- Select -</option>');
for (var i = 0,opt; opt= jsonData.Table[i]; ++i) {
    $('#input-to').append('<option value="' + opt.stateid + '">' + opt.statename + '</option>');
}
});

$（文档）.ready（函数（）{
$（'#input to'）。追加（'-Select-'）；
for（var i=0，opt；opt=jsonData.Table[i]；+i）{
$（“#输入到”）.append（“”+opt.statename+“”）；
}
});

但同样的，我的下拉列表仍然是空的。。。 语法没有问题，就像我手动添加选项一样，我可以看到可用的选项

还有一件事，我的表单被一个脚本包围：

<script type="text/template" id="compose-view-template">
....<form>
</script>

....

使用以下js

        var ComposeView = Backbone.View.extend({


        template: _.template($('#compose-view-template').html()),

        attributes: {
            id: 'compose-view',
            class: 'compose-view'
        },

        events: {
            "click #compose-save-button, #compose-send-button, #compose-discard-button": 'backToFolders'
        },

        render: function() {
            $('#widget-email-header').html(
                '<h5>Nouvel <span class="fw-semi-bold">Email</span></h5>'
            );
            $('#folder-stats').addClass('hide');
            $('#back-btn').removeClass('hide');
            this.$el.html(this.template(this.model.toJSON()));
            this._initViewComponents();


            return this;
        },

        backToFolders: function(){
            App.showEmailsView();

        },

        _initViewComponents: function(){
            this.$("textarea").wysihtml5({
                html: true,
                customTemplates: bs3Wysihtml5Templates,
                stylesheets: []
            });
        }
    });

var ComposeView=Backbone.View.extend({
模板：35;.template（$（'#撰写视图模板'）.html（）），
属性：{
id:'合成视图'，
类：“撰写视图”
},
活动：{
“单击#撰写保存按钮、#撰写发送按钮、#撰写放弃按钮”：“backToFolders”
},
render:function（）{
$（'#小部件电子邮件标题'）.html(
“新邮件”
);
$（“#文件夹统计数据”）.addClass（'hide'）；
$（“#back btn”）.removeClass（'hide'）；
this.el.html（this.template（this.model.toJSON（））；
这是。_initViewComponents（）；
归还这个；
},
backToFolders:函数（）{
App.showmailsview（）；
},
_initViewComponents:function（）{
此.$（“textarea”）.wysihtml5({
是的，
自定义模板：BS3WYSIHTML5模板，
样式表：[]
});
}
});

---

当表单未完全创建时，是否会调用js函数？因此，没有操作（也没有错误），因为表单没有完全创建？

您在代码中犯了一个小错误

请参见下面的逗号代码：

 var jsonData = {
  "Table": [{
      "stateid": "2",
      "statename": "Texas"
  }, {
      "stateid": "3",
      "statename": "Louisiana"
  }, {
      "stateid": "4",
      "statename": "California"
  }, {
      "stateid": "5",
      "statename": "Nevada"
  }, {
      "stateid": "6",
      "statename": "Massachusetts"
  }]
};

 $(document).ready(function () {
     //
     // Since your are adding the html to the element
     // You dont need to recreate it!
     //

     //  var listItems = '<option selected="selected" value="0">- Select -
     //  </option>';
     var listItems="";

  for (var i = 0; i < jsonData.Table.length; i++) {
         listItems += "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>";
     }
    console.log(listItems);
     $("#input-to").html(listItems);
 });

var jsonData={
“表格”：[{
“stateid”：“2”，
“州名”：“德克萨斯州”
}, {
“stateid”：“3”，
“州名”：“路易斯安那州”
}, {
“stateid”：“4”，
“州名”：“加利福尼亚州”
}, {
“stateid”：“5”，
“州名”：“内华达州”
}, {
“stateid”：“6”，
“州名”：“马萨诸塞州”
}]
};
$（文档）.ready（函数（）{
//
//因为您正在将html添加到元素中
//你不需要重新创建它！
//
//var listItems='-选择-
//  ';
var listItems=“”；
对于（var i=0；i

这是一个工作版本的小提琴

---

使用

。追加

而不是构建HTML字符串。像这样的

$(document).ready(function () {
    $('#input-to').append('<option selected="selected" value="0">- Select -</option>');
    for (var i = 0,opt; opt= jsonData.Table[i]; ++i) {
        $('#input-to').append('<option value="' + opt.stateid + '">' + opt.statename + '</option>');
    }
});

$（文档）.ready（函数（）{
$（'#input to'）。追加（'-Select-'）；
for（var i=0，opt；opt=jsonData.Table[i]；+i）{
$（“#输入到”）.append（“”+opt.statename+“”）；
}
});

参见工作示例

var jsonData={
“表格”：[{
“stateid”：“2”，
“州名”：“德克萨斯州”
}, {
“stateid”：“3”，
“州名”：“路易斯安那州”
}, {
“stateid”：“4”，
“州名”：“加利福尼亚州”
}, {
“stateid”：“5”，
“州名”：“内华达州”
}, {
“stateid”：“6”，
“州名”：“马萨诸塞州”
}]
};
$（文档）.ready（函数（）{
$（'#input to'）。追加（'-Select-'）；
for（var i=0，opt；opt=jsonData.Table[i]；+i）{
$（“#输入到”）.append（“”+opt.statename+“”）；
}
});

我试图更改listITems delcaration，但结果相同。请注意，listItems正确地填充了不同的选项，如果我在select中复制/粘贴选项manuall，我可以在下拉列表中看到不同的选项如果您看到我的答案，请查看是否添加了到JSFIDLE的链接，您可以在其中查看代码的工作版本。代码没有运行错误，并按预期在下拉列表中显示状态-您能接受正确的答案吗-谢谢。抱歉，即使您的建议有效，但当我将其集成到mi代码中时，它也无效…我的建议修复了您在问题中发布的问题。它在代码中不起作用的原因是，在代码的其他部分，我没有看到更多的错误。当你运行你的代码时，它会在控制台中出现一个错误，这个错误会阻止我上面的代码运行。因此，您的代码不起作用。您需要学习如何在代码中查找bug。要启动，请打开浏览器开发控制台并查找错误-它们以鲜红色列出。代码中的任何错误都会阻止所有代码运行。MartinWebb，谢谢你的建议，但我知道如何调试我的代码……如果我请求帮助是因为我尝试了多个案例，我需要第二个视图和jquery方面的专业知识，而不是调试方面的专业知识，因为我没有任何错误……你加载了
jquery.js
<代码>$

需要在加载之前加载

jquery