使用jquery动态添加时，materialize css中的select的行为不符合预期
使用jquery动态添加时，materialize css中的select的行为不符合预期
提问于 2018-07-11 08:50:16
我试图动态地添加选项到一个选择在物化css.It查询团队名从mongodb和添加them.But列表选项是保持稳定，它显示但消失fast.This不是通常的选择的情况，它会一直到一个选项是selected.Please更正我或引导我克服这个问题。
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(
'<option value='+project.teamname+'>'+project.teamname+'</option>\
')
console.log(project.teamname);
});
}
});
})
});回答 1
Stack Overflow用户
发布于 2018-07-12 00:03:54
在追加<option>元素后，您需要使用以下内容：
M.FormSelect.init(document.getElementById("teamname"))或者使用Jquery
$("#teamname").formSelect()在附加所有选项之前，还应避免调用.formSelect()。
response.forEach(function(project){
$('#teamname').prepend('<option value='+project.teamname+'>'+project.teamname+'</option>\')
console.log(project.teamname);
});
$("#teamname").formSelect();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51275755
复制相关文章
相似问题
腾讯云开发者
