如何使用 JS 动态创建选择输入答案

【问题标题】：How to dynamically create select input using JS如何使用 JS 动态创建选择输入
【发布时间】：2019-12-30 04:26:38
【问题描述】：

所以我正在尝试构建一个应用程序，您可以在其中向网页添加班次。我可以添加

页面的元素和文本输入，但是选择输入未显示在页面上

它应该是什么样子

实际的样子

正如您所见，除了选择之外，所有其他元素都运行良好...

代码

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);

为什么我无法像这样添加选择？

【问题讨论】：

您的第一个选择标签发生了一些引号混淆。
你会想要查看一些 html 模板，例如 Handlebars 或 React
啊这是旧代码，我刚刚更新了它
额外的 ' 是问题吗？

标签： javascript frontend backend materialize

【解决方案1】：

在shiftStart 之后有一个额外的'：

"<select id='shiftStart'" + numOfShifts + "' class='start-hour front'>"

【讨论】：