使用jquery动态添加时，实体化css中的select不符合预期
我正在尝试动态地将选项添加到物化css中的选择。它从mongodb查询teamname并添加它们。但是列表选项保持稳定，它显示但是快速消失。这不是通常选择的情况，它一直保持到选择了一个选项。请纠正我或指导我克服这个问题。
doctype html head title Register // Import Google Icon Font link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet') // Import materialize.css // Compiled and minified CSS link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css') // Let browser know website is optimized for mobile meta(name='viewport', content='width=device-width, initial-scale=1.0') .card-panel.hoverable.container .row form#reg_project.col.s12(method='POST', action='/projects/reg_project') .row .col.s12 br br h6#q2.center-align | Bravo! It always seems impossible until it's done. h5#q1.center-align | Never give up,just keep going #{user.username} br hr(style='width: 250px;') br .row h5.center-align It's not about ideas.It's about making ideas happen h6#q1.center-align Wee! Let's build the future br br .row .col.s6 .input-field.col.s12 input#name.validate(type='text', name='name' value=username) label(for='name') Name span.helper-text(data-error='Oops,fill me', data-success='cool,nice name champ!') .col.s6 .input-field.col.s12 select(name='dep') option(value='', disabled='', selected='') Department option(value='1') MECH option(value='2') CIVIL option(value='3') CSE option(value='4') EEE option(value='5') ECE option(value='6') MCA option(value='7') OTHERS label Home of your passion .row .col.s6 .input-field.col.s12 input#email.validate(type='email', name='email' value=email) label(for='email') Email span.helper-text(data-error='Oops!you missed me', data-success='Cheers!email ok') .col.s6 .input-field.col.s12 select(name='yr') option(value='', disabled='', selected='') YEAR option(value='8') FIRST YEAR option(value='9') SECOND YEAR option(value='10') THIRD YEAR option(value='11') FOURTH YEAR label Bootstrapping my .row .col.s6 p label.col.s6 input.with-gap(name='position', type='radio', value='team', checked='') span Team label.col.s6 input.with-gap(name='position', type='radio', value='individual') span Lone Wolf .col.s6 p // Switch label.col.s6 Join hands with my peers .switch label | Yes input#button1(type='checkbox') span.lever | No .row #hide.col.s6 #test.input-field.col.s12 select(name='teamname' id='teamname') // dynamic insertion label Registered teams #div1.col.s6(style='display: none;') .input-field.col.s12 input#teamname.validate(type='text', name='teamname') label(for='teamname') Team Name span.helper-text(data-error='Oops,fill me or try to revert back to pick one', data-success='cool,all the best!') .col.s6 .input-field.col.s12 input#project_title.validate(type='text', name='project_title' required) label(for='project_title') Your project title span.helper-text(data-error='Oops,fill me', data-success='Wow,all the best yar!') .row .col.s6 .input-field.col.s12 textarea#project_description.materialize-textarea.validate(name='project_description' required) label(for='project_description') Project Description span.helper-text(data-error='Ahem,please tell us about your project', data-success='Super cool!') .col.s6 br // Switch label.col.s6 Have prior project experience in THIRAN .switch label | Yes input#button2(type='checkbox', name='experience') span.lever | No br .row .col.s6.div2 .input-field.col.s12 input#pre_project_title.validate(type='text', name='pre_project_title') label(for='pre_project_title') Previous project title span.helper-text(data-error='Oops,please fill it', data-success='Impressive') .col.s6.div2 .input-field.col.s12 textarea#pre_project_description.materialize-textarea.validate(name='pre_project_description') label(for='pre_project_description') Description span.helper-text(data-error='Ahem,few words please', data-success='Great job!') .row .col.s12.div2 .input-field.col.s12 textarea#feedback.materialize-textarea(name='feedback') label(for='feedback') Feedback span.helper-text(data-error='Ahem,your feedbacks help us serve better', data-success='Thanks champ!') small Share a few words about your experience in thiran .row .col.s6 p label input#button3(type='checkbox', name='mentor', checked='') span Mentor needed br small Uncheck if not needed #div3.col.s6 .input-field.col.s12 input#phoneno.validate(type='text', name='phoneno') label(for='phoneno') Contact no span.helper-text(data-error="Ahem,we couldn't help you much without sufficient contact no", data-success='Done,we will contact you soon') .row .center-align input.btn.btn-primary(type='submit', value='Submit') script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js') // Compiled and minified JavaScript script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js') script(src='/js/main.js') script(type='text/javascript'). 和我的jquery在main.js文件中添加选项
$(document).ready(function(){ $('#test').click(function(){ $.ajax({ url:'/projects/getprojects/', method:"GET", success:function(response){ response.forEach(function(project){ $("#teamname").formSelect(); $('#teamname').prepend( ''+project.teamname+'\ ') console.log(project.teamname); }); } }); }) });
附加元素后，您需要使用以下内容：
M.FormSelect.init(document.getElementById("teamname"))
或者使用Jquery
$("#teamname").formSelect()
您还应该避免调用.formSelect()直到追加所有选项。
response.forEach(function(project){ $('#teamname').prepend('\') console.log(project.teamname); }); $("#teamname").formSelect();