我想在我的腳本中使用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 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消