ajax вызов не работает с более чем 2 выбора на одной странице

Question

У меня более 3-х выборок на одной странице,

, когда я изменяю, выбираю с идентификатором #form_department, запрос отправляется нормально и получает данные в id #form_section ,, но меняются в select с идентификатором #form_section нет запроса или действия сделать !!

html код

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="form_department">Choose Department  *</label>

            <select id="form_department" name="form_department" class="form-control" required="required" data-error="Please specify your need.">

              <option value="" disabled="" selected="">Choose Department</option>

                <?php 

                $query = ("select * from ti_department");

                $stm = $con->query($query);

                while ($row = $stm->fetch()) {

                  echo "<option value='$row[0]'>$row[1]</option>";
                }
                ?>

            </select>
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="col-md-6" id="sections_from_department">
        <div class="form-group">
            <label for="form_section">Choose The Section  *</label>

            <select id="form_section" name="form_section" class="form-control" required="required" data-error="Please Choose Department firstly." disabled="">

                <option value="">Please Choose Department firstly</option>
            </select>
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="col-md-6" id="department_cat">
        <div class="form-group">
            <label for="form_cat">Choose The Category  *</label>

            <select id="form_cat" name="form_cat" class="form-control" required="required" data-error="Please Choose Section firstly." disabled="">

                <option value="">Please Choose Section firstly</option>
            </select>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    <div class="col-md-6" id="cat_type">
        <div class="form-group">
            <label for="form_type">Choose The Type  *</label>

            <select id="form_type" name="form_type" class="form-control" required="required" data-error="Please Choose Department Category." disabled="">

                <option value="">Please Choose Category firstly</option>
            </select>
            <div class="help-block with-errors"></div>
        </div>
    </div>

    </div>

jquery ajax код

//update section

$('#form_department').on('change',function(){


var departmen_id = $('#form_department').val();

var action = 'get_section';


var selected_dep = $(this).find('option:selected').text();



console.log(selected_dep);

      load_data();  
      function load_data(dep_id)  
      {  
           $.ajax({  
                url:"get_info.php",  
                method:"POST",  
                data:{dep_id:departmen_id,action:action},


                success:function(data){  
                     $('#sections_from_department').html(data);  
                }  
           })  
      } 




});



//update category

 $('#form_section').on('change',function(){


 var section_id = $('#form_section').val();

 var action = 'get_cat';

console.log(section_id);



  load_data();  
       function load_data(sec_id)  
       {  
            $.ajax({  
                 url:"get_info.php",  
                 method:"get",  
                data:{section_id:section_id,action:action},


                success:function(data){  
                     $('#department_cat').html(data);  
                }  
            })  
      } 

 }); 

мне нужна любая помощь, чтобы сделать больше, чем запрос, используя ajax позвонить

Answer 1

Второй список заполнен динамически, рекомендуется выбирать с использованием его родительского контейнера или просто глобального тела.

$('#form_department').on('change', function () {

   var departmen_id = $('#form_department').val();

        var action = 'get_section';

        var selected_dep = $(this).find('option:selected').text();

        console.log(selected_dep);

        load_data();
        function load_data(dep_id) {
            $.ajax({
                url: "get_info.php",
                method: "POST",
                data: {
                    dep_id: departmen_id,
                    action: action
                },

                success: function (data) {
                    $('#form_section').html(data);
                }
            })
        }

    });

    //update category

    $('body').on('change', '#form_section'), function () {

        var section_id = $('#form_section').val();

        var action = 'get_cat';

        console.log(section_id);

        load_data();
        function load_data(sec_id) {
            $.ajax({
                url: "get_info.php",
                method: "get",
                data: {
                    section_id: section_id,
                    action: action
                },

                success: function (data) {
                    $('#department_cat').html(data);
                }
            })
        }

   });

В вашем коде вы нацеливаетесь на родительский div, а не на предполагаемую форму #form_section ...