Estoy tratando de llenar una lista desplegable dinámicamente pero no funciona. aquí está el código:

<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>

Y el JS correspondiente:

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

Si inserto manualmente las etiquetas de opción, puedo verlas correctamente en la selección, pero no dinámicamente ... También probé con el método .append pero aún tengo una lista desplegable vacía.

¿Alguna idea?

EDITAR 1:

También intenté usar .append así:

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

Pero lo mismo, mi menú desplegable permanece vacío ... No hay problema de sintaxis ya que si agrego manualmente las opciones puedo ver las opciones disponibles.

Una cosa adicional, mi formulario está rodeado por un script:

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

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

¿Puede ser que se llame a la función js cuando el formulario no está completamente creado? por lo tanto, no hay acción (ni error) porque el formulario no está completamente creado.

-1
tiamat 12 nov. 2017 a las 01:34

2 respuestas

La mejor respuesta

Estás cometiendo un pequeño error en tu código

Vea el código comentado a continuación:

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

Aquí hay un violín de una versión funcional.

https://jsfiddle.net/40zz77ex/

0
MartinWebb 12 nov. 2017 a las 14:08

Utilice .append en lugar de crear una cadena HTML. Algo como esto.

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

Ver ejemplo de trabajo

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>
0
Alex Kudryashev 12 nov. 2017 a las 21:05