Question

我在用ajax填充html的select字段时遇到问题。

在加载页面时，只有一行。在通过ajax从课程字段中选择课程时，我已经取了id并用相应的board填充它。但是当我通过附加表插入新行时，课程和分支字段不会随着代码的写入而填充。

请检查代码

     $('#myTable').on('click', 'input[type="button"]', function () {
            $(this).closest('tr').remove();
        })
        var html = "";
        html += '<tr>';
        html += '<td><select class= "form-control" name="course[]"  id="course"  style="width: 200px">';
        html += '<option value="">--SELECT COURSE --</option>';
        html += '<?php foreach ($courseList as $key => $value) { ?>';
            html += '<option value="<?php echo $value['id']; ?>"><?php echo $value['c_name']; ?></option>';
            html += '<?php } ?>';
        html += '</select>';
        html += '</td>';
        html += '<td><select class= "form-control" name="branch[]"  id="branch" style="width: 200px"></select>';
        html += '</td>';
        html += '<td><input type="number"  class="form-control" name="course_fee[]" placeholder="Course Fee" autocomplete="off" required=""></td>';
        html += '<td><input type="number"  class="form-control" name="discount_per[]" placeholder="Discount Percent" autocomplete="off" required=""></td>';
        html += '<td><input type="number"  class="form-control" name="total_seats[]" placeholder="Total Seats" autocomplete="off" required=""></td>';
        html += '<td><input type="text"  class="form-control stime" name="start_session[]" placeholder="Start Session" autocomplete="off" required=""></td>';
        html += '<td><input type="text"  class="form-control etime" name="end_session[]" placeholder="End Session" autocomplete="off" required=""></td>';
        html += '<td>';
        html += '<input type="button" class="btn btn-danger" value="Delete" />';
        html += '</td>';
        html += '</tr>';
        $('p input[type="button"]').click(function () {
            $('#myTable').append(html);
        });

 $(document).on('change', '#course', function () {
            //alert("ssss");
            fetch_select(this);
        })

        function fetch_select(val)
        {

            //console.log(val.value);
            $.ajax({
                type: 'post',
                url: 'common/ajax.function.php',
                data: {
                    course_id: val.value, course: "select_course"
                },
                success: function (response) {
                    //console.log(response); 
                    var html = "";
                    var data = JSON.parse(response);
                    //console.log(data);
                    if (data !== '') {
                        $.each(data, function (key, value) {
                            html += ' <option name="branch_id" id="' + value['id'] + '" value="' + value['id'] + '">' + value['branch_name'] + '</option>';
                        })
                    } else {
                        $("#branch").prop("disabled", "true");
                    }
                    //$(val).closest('select').html(html);
                    //$(val).next().html(html);
                    $("td").siblings("td").children("#branch").html(html);
                    //$("#branch").html(html);
                    //document.getElementById("new_select").innerHTML = response;
                }
            });
        }

php代码是

<table id="myTable" class="data datatable table table-striped table-bordered table-hover" id="institution">  
                                    <thead>  
                                        <tr>  
                                            <th style="width:0px">Course</th>
                                            <th>Branch</th>
                                            <th>Course Fee</th> 
                                            <th>Discount Percent</th>
                                            <th>Total Seats</th>
                                            <th>Start Session</th>
                                            <th>End Session</th>
                                        </tr>  
                                    </thead>  
                                    <tbody>
                                        <tr>
                                            <td><select class= "form-control" name="course[]"  id="course" style="width: 200px" >
                                                    <option value="">--SELECT COURSE --</option>
                                                    <?php foreach ($courseList as $key => $value) { ?>
                                                        <option value="<?php echo $value['id']; ?>"><?php echo $value['c_name']; ?></option>
                                                    <?php } ?>
                                                </select>
                                            </td>
                                            <td  ><select class= "form-control" name="branch[]"  id="branch" style="width: 200px">
                                                </select></td>
                                            <td><input type="number"  class="form-control" name="course_fee[]" placeholder="Course Fee" autocomplete="off" required=""></td>
                                            <td><input type="number"  class="form-control" name="discount_per[]" placeholder="Discount Percent" autocomplete="off" required=""></td>
                                            <td><input type="number"  class="form-control" name="total_seats[]" placeholder="Total Seats" autocomplete="off" required=""></td>
                                            <td><input type="text"  class="form-control stime" name="start_session[]" placeholder="Start Session" autocomplete="off" required=""></td>
                                            <td><input type="text"  class="form-control etime" name="end_session[]" placeholder="End Session" autocomplete="off" required=""></td>
                                            <td>
                                                <input type="button" class="btn btn-danger" value="Delete" />
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                                <br>
                                <p style="float: right">
                                    <input type="button" value="Insert row &darr;">
                                </p>

Answer 1

请注意，您的网页中 ID必须是唯一的，如果您继续重复ID，则标记验证程序会在扫描您的网页时尖叫，而您的JavaScript将无法按预期工作。< / p>

首先，用这种野蛮方式用HTML编写表行是错误的。你要么：

提出了一种更系统的方式
依靠服务器向您发送完整行并将其附加到现有服务
克隆现有行，但请确保不要重复ID（即使您不想访问ID，因为您可以使用DOM树轻松识别行的位置，ID必须是唯一的）

假设您将类course添加到课程选择中，而不是ID，您需要找出需要更新的行。为此，您想知道change事件目标。所以，你会这样做

$(document).on('change', '.course', function(event) {
    let target = $(event.target);
    // ajax logic here that will result in a string containing the options, I called it ajaxResult
    target.siblings('.branch').html(ajaxResult);
}

注意1：请注意我已将#branch更改为.branch
注2：请注意，您将在

$('p input[type="button"]').click(function () {
    $('#myTable').append(html);
});

动态ajax填充问题

1 个答案: