Javascript 如何使用jQuery数据表使用onChange事件从html选择标记选项值中获取值？

我正在处理jQuery数据表，以便从mysql数据库加载少量数据

以下是html代码：

<table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
    <thead>
        <tr>
            <th>#</th>
            <th>User Id</th>
            <th>Address</th>
            <th>Package Name</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
</table>

// skipping more code...

$nestedData[] = "
<select class='form-control changeStatus' name='status'>
    <option value=''>--Select--</option>
    <option value='1|$client_id' $statusMsg1>Active</option>
    <option value='2|$client_id' $statusMsg2>Blocked</option>
</select>";

$(document).ready(function() {

    var dataTable = $('#employee-grid').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{
            url :"server_processing.php", // json datasource
            type: "post",  // method  , by default get
            error: function(){  // error handling
                $(".employee-grid-error").html("");
                $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                $("#employee-grid_processing").css("display","none");

            }
        }
    } );

    $("#employee-grid").on('change', function() {
        var status = $('.changeStatus').val();
        alert(status);
        $.ajax({
            url : "<?php echo SITE_URL . 'toplevel/update-data'; ?>",
            data : {
                'statusChange' : status
            }, 
            type : 'POST',
        });
    });

});

但当我选择该选项时，每次它通过第一个选项值时

<table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
    <thead>
        <tr>
            <th>#</th>
            <th>User Id</th>
            <th>Address</th>
            <th>Package Name</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
</table>

// skipping more code...

$nestedData[] = "
<select class='form-control changeStatus' name='status'>
    <option value=''>--Select--</option>
    <option value='1|$client_id' $statusMsg1>Active</option>
    <option value='2|$client_id' $statusMsg2>Blocked</option>
</select>";

$(document).ready(function() {

    var dataTable = $('#employee-grid').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{
            url :"server_processing.php", // json datasource
            type: "post",  // method  , by default get
            error: function(){  // error handling
                $(".employee-grid-error").html("");
                $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                $("#employee-grid_processing").css("display","none");

            }
        }
    } );

    $("#employee-grid").on('change', function() {
        var status = $('.changeStatus').val();
        alert(status);
        $.ajax({
            url : "<?php echo SITE_URL . 'toplevel/update-data'; ?>",
            data : {
                'statusChange' : status
            }, 
            type : 'POST',
        });
    });

});

例如，此

选择的
选项标签具有以下值：

<option value='1|11' $statusMsg1>Active</option>
<option value='2|11' $statusMsg2>Blocked</option>

激活
此 路 不通

它总是传递
1 | 11
值！！它应该是通过我选择的选项值。我不明白为什么会这样：(

注意：我认为使用jQuery数据表定制的jQuery代码应该以不同的方式使用。
伙计们

我已经解决了。我需要用这样的方法：

$('#employee-grid').on('change', '.changeStatus', function(){
    // testing.....
    var status = $('.changeStatus').val();
    alert(status);
}); 

解决方案是通过在on（）调用中提供目标元素的选择器作为第二个参数来使用事件委派。
是从PHP打印多行还是仅打印一行？