尝试在另一个change()中使用change()
我想在我的脚本中使用jquery中的change()函数来更改matiere列表数据，当用户选择niveau选项时我尝试在第一个change函数中添加另一个change()函数，但它不起作用，它从中删除了所有数据所有选择框，但当我仅使用第一个更改功能时，它可以正常工作这是我的表单
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="purple">Cycle</label>
<select id="cycle" required class="chosen form-control border-or" name="cycle" >
<option required selected disabled value="fail">Choix du cycle </option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="purple">Ecole</label>
<select id="ecole" required class="chosen form-control border-or" name="ecole" >
<option required selected disabled value="fail">Choix de l'école </option>
<option required class="form-control " value= "elmanbaa" > EL MANBAA </option>
<option required class="form-control " value= "source" >LA SOURCE DE TETOUAN </option>
<option required class="form-control " value= "ilm" > MANABIA AL ILM </option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="purple">Matiere</label>
<select required class="chosen form-control border-or" id="matiere" name="matiere" >
<option required selected disabled value="fail">Choix de la matiere </option>
</select>
</div>
</div>
</form>
喵喵时光机1回答
-
BIG阳
您应该使用.append()通过 dom 而不是.html().在下面的代码片段中，您可以检查它。$(document).ready(function () { $("#ecole").change(function () { console.log("#ecle", $('#ecole').val()) switch($(this).val()) { case 'elmanbaa': $("#cycle").append("<option value='maternelle'>Maternelle</option>"); //Use append instead of html(); $("#cycle").change(function () { console.log("#cycle", $('#cycle').val()) switch($(this).val()) { case 'maternelle': $("#matiere").append("<option value='Français'> Français </option>"); break; default: $("#matiere").append("<option value=''>--Choix matiere--</option>"); break; } }); $("#niveau").append("<option value='mm'>Moyenne maternelle</option><option value='gm'>"); break; default: $("#size").html("<option value=''>--select one--</option>"); } }); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body> <form> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label class="purple">Cycle</label> <select id="cycle" required class="chosen form-control border-or" name="cycle" > <option required selected disabled value="fail">Choix du cycle </option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label class="purple">Ecole</label> <select id="ecole" required class="chosen form-control border-or" name="ecole" > <option required selected disabled value="fail">Choix de l'école </option> <option required class="form-control " value= "elmanbaa" > EL MANBAA </option> <option required class="form-control " value= "source" >LA SOURCE DE TETOUAN </option> <option required class="form-control " value= "ilm" > MANABIA AL ILM </option> </select> </div> </div> <div class="col-md-12"> <div class="form-group"> <label class="purple">Matiere</label> <select required class="chosen form-control border-or" id="matiere" name="matiere" > <option required selected disabled value="fail">Choix de la matiere </option> </select> </div> </div>您还可以检查此代码并验证它。
随时随地看视频慕课网APP
相关分类
Html5