無法動態創建選擇與其選項

Question

我試圖動態創建一個選擇輸入裏面的div，但事實證明，有一個空的div與注意。

正如您所見，$ eduRow是一個用作容器的div。試圖以多種方式解決它，但仍然無法正常工作（總是出現空格）。

我有一個單擊按鈕，可以在點擊後動態創建這些選擇的東西。

以下是寫入文件準備功能的功能。

$("#addMoreEdu").on('click', function() { 

    var $eduRow = $("#edu-row"); 


    var select = $('<select />', { 
    'class': 'selectoption' 
    }); 


    $(select).append($('<option value="" disabled selected>Degree option</option>')); 
    $(select).append($('<option value="1">High School</option>')) 
    $(select).append($('<option value="2">College</option>')) 
    $(select).append($('<option value="3">Bachelors degree</option>')) 

    var div = $('<div />', { 
    'class': 'input-field col s12 m4 l4' 
    }); 

    $(div).append(select) 

    $eduRow.append(div); 

    $eduRow.append('<div class="input-field col s12 m4 l8"><span class="fieldLabel"> Institutes Name</span><input placeholder="Institutes Name" id="IntsName" type="text" /></div>'); 
}); 

另一個奇怪的是，第二個append工作正常。我認爲在選擇時一定有一些問題：\ 有什麼想法？

注意：如果您可以看看教育背景部分，我在這裏有我的代碼codepen。

Answer 1

我已經在空白項目中運行此代碼，它的工作原理。我做的唯一更改是將代碼包裝在$(document).ready(function() { YOUR CODE HERE });構造中。我建議你可能會遇到另一個問題，無論是你的選擇器，還是你的腳本包含jQuery。

嘗試把一個debugger;線運行與調試工具去（F12）

Answer 2

這會將div &下拉到正文的末尾，您可以使用任何其他標記來控制將添加html的位置。

$('body').append('<div id="maindiv"></div>'); 
$('#maindiv').append('<select id="ddww" class="selectoption"></select>'); 
$('#ddww').append('<option value="" selected>Degree option</option>'); 
//all other options 

Answer 3

所以，你必須等待文件加載，然後定義元素在開始和結束標記HTML，並在打開的標籤指定屬性：

我想你有這樣的HTML：

<div id="edu-row"> 

</div> 

JavaScript的應該是這樣的：

$(document).ready(function(){ 

    var $eduRow = $("#edu-row"); 
    var select = $('<select class="selectoption"><select />'); 
    //you can append html without $() 
    $(select).append('<option value="" disabled selected>Degree option</option>'); 
    $(select).append('<option value="1">High School</option>') 
    $(select).append('<option value="2">College</option>') 
    $(select).append('<option value="3">Bachelors degree</option>') 

    var div = $('<div class="input-field col s12 m4 l4"></div >'); 
    $(div).append(select) 

    $eduRow.append(div); 
}) 

這裏是一個小提琴：https://jsfiddle.net/m0786yq4/