如何使用jquery和codeigniter从foreach循环中获取当前值

Question

这是我的代码：

 <section class="panel"> <header class="panel-heading"> <a data-toggle="modal" data-target="#modal_edit" onclick="modal_edit('<?php echo base_url() ?>leave/save')" class="btn btn-default pull-right" href=""><i class="fa fa-calendar-minus-o"></i>&nbsp;Add Leave</a> <!-- <a class="btn btn-default pull-right" href="<?php echo base_url() ?>leave/apply_leave"><i class="fa fa-calendar-minus-o"></i>&nbsp;Appsssly Leave</a> --> <h2 class="panel-title">Employee Leave History</h2> </header> <div class="panel-body"> <table class="table table-bordered table-striped mb-none" id="datatable-tabletools" data-swf-path="assets/vendor/jquery-datatables/extras/TableTools/swf/copy_csv_xls_pdf.swf"> <thead> <tr> <th>#</th> <th>Employee Name</th> <th>Leave Type </th> <th>Subject</th> <th class="hidden-phone">From date - To date</th> <th class="hidden-phone">Reason</th> <th>Status</th> </tr> </thead> <tbody> <?php $count = 1 ?> <?php foreach ($leave as $leave): ?> <tr class="gradeX"> <td><?php echo $count++ ?></td> <td id="name"><?php echo $leave->first_name . ' ' . $leave->last_name ?> <input type="button" id="employee_id" value="<?php echo $leave->employee_id ?>"/> </td> <td><?php echo $leave->name ?></td> <td><?php echo $leave->subject ?></td> <td><?php echo $leave->from_date . ' - ' . $leave->to_date ?></td> <td><?php echo $leave->reason ?></td> <td> <select id="status" data-plugin-selectTwo class="form-control populate placeholder" > <option value="Pending">Pending</option> <option value="Granted">Granted</option> <option value="Rejected">Rejected</option> </select> </td> </tr> <?php endforeach; ?> <!-- //onchange="update_status('<?php echo base_url().'status/leave/'.$employee_id ?>')" onchange="myFunction();" --> </tbody> </table> </div> <div> </div> </section> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $("#status").ready(function () { $(this).change(function () { //var y =$('#status').val(); //alert($('#status option:selected').val() ); //alert($("#status").select()); // var x = $('#employee_id').val(); // alert(this.x) console.log(1); $.ajax({ url :'<?php echo base_url() ?>leave/status', data : { status : $(this).val(), employee_id : $('#employee_id').val(), // name : $('#name').val(), }, dataType: 'json', success : function(response) { alert(response); } }); }); }); </script> 

我有foreach循环，并且有一个带有值的下拉列表。 如果我有4个循环然后我想只更新叶子只有1-st循环，意味着id = 1 ，使用ajax它完美地工作。

现在我想更新id = 2但是问题是， jquery没有得到id = 2值，它选择第一个id值意味着id =1 。 现在我想更新id = 2来更新他们的假期。

Answer 1

您不能多次使用相同的ID。 HTML的第一个变化

<?php foreach ($leave as $leave): ?>
<tr class="gradeX">
    <td><?php echo $count++ ?></td>
    <td id="name"><?php echo $leave->first_name . ' ' . $leave->last_name ?>
        <input type="button" class="employee_id" value="<?php echo $leave->employee_id ?>"/> 
    </td>
    <td><?php echo $leave->name ?></td>
    <td><?php echo $leave->subject ?></td>
    <td><?php echo $leave->from_date . ' - ' . $leave->to_date ?></td>
    <td><?php echo $leave->reason ?></td>
    <td>
        <select  id="<?php echo $leave->employee_id ?>" class="status" data-plugin-selectTwo class="form-control populate placeholder" >
            <option value="Pending">Pending</option>
            <option value="Granted">Granted</option>
            <option value="Rejected">Rejected</option>
        </select>

    </td>
</tr>
<?php endforeach; ?>

在Javascript中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".status").change(function () {
            var employee_id = $(this).prop('id');  
            var status = $(this).val();
            $.ajax({
               url   :'<?php echo base_url() ?>leave/status',
               data  : {'status' : status, 'employee_id' : employee_id},
               dataType: 'json',
               success : function(response) {
                   alert(response);

               }
            });
        });
    });

</script>

我希望这能解决您的问题。