Попытка использовать change () внутри другого change () - PullRequest
Новая
       0

Попытка использовать change () внутри другого change ()

1 голос
/ 06 апреля 2020

Я хочу использовать функцию change () в jquery в моем скрипте, чтобы изменить данные списка matiere, когда пользователь выберет опцию niveau. Я попытался добавить еще одну функцию 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>

Вот мой jquery скрипт: 

      <script>
    $(document).ready(function () {

  $("#ecole").change(function () {
     switch($(this).val()) {
        case 'elmanbaa':
          $("#cycle").html("<option value='maternelle'>Maternelle</option>");

         $("#cycle").change(function () {
              switch($(this).val()) {
                      case 'maternelle':
                    $("#matiere").html("<option   value= "Français" > Français </option>");
                      break;

                  default:
                      $("#matiere").html("<option value=''>--Choix matiere--</option>");
              }
            });


          $("#niveau").html("<option value='mm'>Moyenne maternelle</option><option value='gm'>");

            break;
        default:
            $("#size").html("<option value=''>--select one--</option>");
     }
  });


});


</script>

1 Ответ

0 голосов
/ 06 апреля 2020

Вы должны использовать .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>

Вы также можете проверить этот код и проверить его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...