Question

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

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

如果我手动插入选项标签，我可以在选择中正确看到它们但不动态... 我也尝试过.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>');
}
});

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

另外一件事，我的表格被脚本包围了：

<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: []
            });
        }
    });

可能是表单未完全创建时调用的js函数？因此，没有动作（也没有错误），因为表格没有完全创建？

Answer 1

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

请参阅下面列出的代码：

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

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

https://jsfiddle.net/40zz77ex/

Answer 2

使用.append而不是构建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>');
    }
});

查看工作示例

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="input-to"></select>

动态填充下拉列表不起作用

2 个答案: