动态创建 Select 输入字段

Question

我在尝试使用 jQuery 动态创建 Materialize select 输入字段时遇到问题。我的目标是在单击按钮时附加 div 和 select 字段。这是我当前的代码：

$(document).ready(function(){
  $('select').formSelect();
});

$("#addSelect").click(function(){
   $("#addSelect").addClass("disabled");
   $("#addSelect").hide();    
   $("#newContent").append("<div class='row'><div class='input-field col s12'><select> <option value='' disabled selected>Choose your option</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option> </select><label>Materialize Select</label><label>Materialize Select</label></div></div><button class='waves-effect waves-light bg-blue btn right' type='button'>Go</button>");  
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<div id='newContent'></div>
<br>
<button class="waves-effect waves-light bg-blue btn right" id="addSelect">Add Select</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

当我检查元素时，它为 select 添加了所有 html，但是 select 不起作用。可能是 css 问题？

感谢您的帮助！

Answer 1

问题是在将动态添加的 select 框附加到 DOM 之前，您是运行您的 $("select").formSelect() 函数。

这可以通过在新添加的元素上显式调用 .formSelect() 来解决：

$("#addSelect").click(function(){
   $("#addSelect").addClass("disabled");
   $("#addSelect").hide();    
   $("#newContent").append("<div class='row'><div class='input-field col s12'><select> <option value='' disabled selected>Choose your option</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option> </select><label>Materialize Select</label><label>Materialize Select</label></div></div><button class='waves-effect waves-light bg-blue btn right' type='button'>Go</button>")

// Find the newly added element and call formSelect() on it.
.find("select").formSelect();
});

工作示例： https://codepen.io/sdflkjgnsdlfn/pen/pKZKOr

有一些 CSS 问题，但这应该能让你继续！

Answer 2

在你的materialize.min.css第13行select设置为display: none;

动态创建 Select 输入字段

Dynamically Create Select Input Field

javascript

jquery

web-deployment

materialize

web