javascript - 无法使用其选项动态创建选择

Question

我尝试动态创建一个内部带有选择输入的 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如果你可以看看教育背景部分。

Answer 1

我已经在一个空白项目中运行了这段代码并且它有效。我所做的唯一更改是将您的代码包装在 $(document).ready(function () { YOUR CODE HERE }); 结构中。我建议您可能对选择器或 jQuery 脚本包含有其他问题。

尝试放入 debugger; 行并运行调试工具 (F12)