動的なポップアップドロップダウンが機能しません

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メソッドを使用していても空のドロップダウンリストが残っています。

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

が、同じことは、私のドロップダウンが空のままで... 構文の問題ありません、私は手動で追加かのようにオプション利用可能なオプションが表示されます。

つの追加の事、私のフォームがスクリプトに囲まれて：フォームが完全に作成されていない場合は、以下の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: [] 
      }); 
     } 
    }); 

と

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

は、JS関数が呼び出されることがありますか？したがって、フォームが完全に作成されていないため、アクションはありません（エラーもありません）。

Answer 1

あなたは以下のうちcommetedのコードを参照してください、あなたのコード内で

を小さなミスをする：ここで

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>