我尝试动态创建一个内部带有选择输入的 div,但结果发现有一个带注释的空 div。
如您所见,$eduRow 是一个用作容器的 div。尝试以多种方式解决它但仍然无法正常工作(总是想出一个空的 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>');
});
另一个奇怪的事情是第二个附加工作正常。我认为 select 一定有问题:\ 有什么想法吗?
注意:我的代码在这里codepen如果你可以看看教育背景部分。
最佳答案
我已经在一个空白项目中运行了这段代码并且它有效。我所做的唯一更改是将您的代码包装在 $(document).ready(function () { YOUR CODE HERE });
结构中。我建议您可能对选择器或 jQuery 脚本包含有其他问题。
尝试放入 debugger;
行并运行调试工具 (F12)
关于javascript - 无法使用其选项动态创建选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38576031/