无法动态创建选择与其选项

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/