使用JavaScript动态创建select输入框不显示问题求助

看起来你是在用Materialize CSS框架开发对吧？问题出在Materialize对<select>的处理方式上——它不是直接使用原生下拉框，而是通过JavaScript把原生<select>转换成了自定义样式的DOM元素，动态添加的<select>不会自动触发这个转换，所以就看不到了。

具体原因 #

你通过拼接HTML字符串创建了新的班次元素并添加到页面，但Materialize的下拉组件需要在元素挂载到DOM后，手动调用初始化方法才能正常渲染。原生的<select>其实已经在DOM里了，但Materialize没处理它，所以你看不到样式化后的下拉框。

修复步骤 #

在你把newShift追加到#add-shift之后，只需要一行代码就能解决：针对新添加的班次里的所有<select>调用Materialize的初始化方法。

修改后的代码片段：

var newShift = $( "<div id='Shift" + numOfShifts + "'><p class='white-text'>Shift" + numOfShifts + "</p><div class='row'><div class='col s4 offset-s2'><div class='row'><p class='white-text'>Shift Starts at:</p><div class='input-field col s6'><select id='shiftStart" + numOfShifts + "' class='start-hour front'><option value='' disable selected>Hour</option><option value='00'>12am</option><option value='01'>1am</option><option value='02'>2am</option><option value='03'>3am</option><option value='04'>4am</option><option value='05'>5am</option><option value='06'>6am</option><option value='07'>7am</option><option value='08'>8am</option><option value='09'>9am</option><option value='10'>10am</option><option value='11'>11am</option><option value='12'>12pm</option><option value='13'>1pm</option><option value='14'>2pm</option><option value='15'>3pm</option><option value='16'>4pm</option><option value='17'>5pm</option><option value='18'>6pm</option><option value='19'>7pm</option><option value='20'>8pm</option><option value='21'>9pm</option><option value='22'>10pm</option><option value='23'>11pm</option></select></div><div class='input-field col s6'><select class='start-minute front'><option value='' disable selected>minutes </option><option value='00'>00</option><option value='15'>15</option><option value='30'>30</option><option value='45'>45</option></select></div></div></div><div class='row'><div class='col s4'><p class='white-text'>Shift Ends at:</p><div class='row'><div class='input-field col s6'><select class='start-hour front'><option value='' disable selected>Hour</option><option value='00'>12am</option><option value='01'>1am</option><option value='02'>2am</option><option value='03'>3am</option><option value='04'>4am</option><option value='05'>5am</option><option value='06'>6am</option><option value='07'>7am</option><option value='08'>8am</option><option value='09'>9am</option><option value='10'>10am</option><option value='11'>11am</option><option value='12'>12pm</option><option value='13'>1pm</option><option value='14'>2pm</option><option value='15'>3pm</option><option value='16'>4pm</option><option value='17'>5pm</option><option value='18'>6pm</option><option value='19'>7pm</option><option value='20'>8pm</option><option value='21'>9pm</option><option value='22'>10pm</option><option value='23'>11pm</option></select></div><div class='input-field col s6'><select class='start-minute front'><option value='' disable selected>minutes </option><option value='00'>00</option><option value='15'>15</option><option value='30'>30</option><option value='45'>45</option></select></div></div></div></div><div class='row'><div class='col s8 offset-s2'><p class='white-text'>Number Of Employees Needed:</p><input id='numOfEmployees' type='text'><label for='numOfEmployees'># Of Employees</label></div></div></div>");

$("#add-shift").append(newShift);

// 关键：初始化新添加的select组件
$("#Shift" + numOfShifts + " select").material_select();

另外提个小细节：你代码里有个<option>标签的语法错误——<option value='16' &gt; 4pm&lt;/option &gt;，这里的转义字符多了空格，已经帮你修正成<option value='16'>4pm</option>了，避免后续可能出现的渲染问题。

补充说明 #

不只是Materialize，很多UI框架（比如Bootstrap的部分组件）对动态添加的元素都需要手动初始化，因为框架的初始化逻辑一般只会在页面加载时执行一次，不会自动监听DOM的新增元素。所以以后碰到这类动态组件的问题，第一反应就是找框架对应的初始化方法哦～

内容的提问来源于stack exchange，提问作者Alex Bailey