猿问

尝试在另一个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>



喵喵时光机
浏览 86回答 1
1回答

BIG阳

您应该使用.append()通过 dom 而不是.html().在下面的代码片段中，您可以检查它。$(document).ready(function () {&nbsp; &nbsp; $("#ecole").change(function () {&nbsp; &nbsp; &nbsp; console.log("#ecle", $('#ecole').val())&nbsp; &nbsp; &nbsp; switch($(this).val()) {&nbsp; &nbsp; &nbsp; &nbsp; case 'elmanbaa':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cycle").append("<option value='maternelle'>Maternelle</option>");&nbsp; &nbsp;//Use append instead of html();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#cycle").change(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("#cycle", $('#cycle').val())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch($(this).val()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'maternelle':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#matiere").append("<option&nbsp; &nbsp;value='Français'> Français </option>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#matiere").append("<option value=''>--Choix matiere--</option>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#niveau").append("<option value='mm'>Moyenne maternelle</option><option value='gm'>");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#size").html("<option value=''>--select one--</option>");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body>&nbsp;<form>&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label class="purple">Cycle</label>&nbsp; &nbsp; &nbsp; &nbsp; <select id="cycle" required class="chosen form-control border-or" name="cycle"&nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option required selected disabled value="fail">Choix du cycle </option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label class="purple">Ecole</label>&nbsp; &nbsp; &nbsp; &nbsp; <select id="ecole" required class="chosen form-control border-or" name="ecole"&nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option required selected disabled value="fail">Choix de l'école </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option&nbsp; required class="form-control " value= "elmanbaa" > EL MANBAA </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option&nbsp; required class="form-control " value= "source" >LA SOURCE DE TETOUAN&nbsp; </option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option&nbsp; required class="form-control " value= "ilm" > MANABIA AL ILM </option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-12">&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label class="purple">Matiere</label>&nbsp; &nbsp; &nbsp; &nbsp; <select required class="chosen form-control border-or"&nbsp; id="matiere" name="matiere"&nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option required selected disabled value="fail">Choix de la matiere </option>&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>您还可以检查此代码并验证它。
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答