我想在我的脚本中使用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阳
TA贡献1859条经验 获得超6个赞
您应该使用.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>
您还可以检查此代码并验证它。
- 1 回答
- 0 关注
- 46 浏览
添加回答
举报
0/150
提交
取消