Jquery ajax调用不能在一个页面中使用2个以上的select

我在一个页面中选择了3个以上

当我在select with id#form#部门中更改时，请求发送ok并在id#form#部分获取数据 ，但id为的select中的更改#表单_部分没有请求或操作

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>

---

在第二个列表是动态填充的，最佳做法是选择使用其父容器或仅使用全局主体

$('#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，而不是假定的表单#表单(u部分…

Php kodun？…Try$（'body'）。在（'change'，'#表单(u部分'）上，function（）{thnx bilel，，它的工作

$('#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);
                }
            })
        }

   });