Question

我有一个从mysql数据库动态填充的表。用户应该选择staff number，它会自动转到数据库并获取他的员工编号。我有10个人。它适用于第一行，但不适用于后续的其他行。

请查看我遗漏的代码和建议。

由于

<tr>
    <th nowrap="nowrap">S/N</th>
    <th nowrap="nowrap">VNO</th>
    <th nowrap="nowrap">Name</th>
    <th nowrap="nowrap">Staff No</th>
</tr>
<tr>
  <?php 
  $c=0; 
  $st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'"); 
  while($r = mysqli_fetch_array($st)){  $c++?> 
  <td><?php echo $c;?></td>
  <td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td>
  <td><select name="opname[]" class="form-control" id="subloc">
    <option>Select...</option>
    <?php  
        $fs = getOperators($_SESSION['location']); 
        while($f = mysqli_fetch_array($fs)){?>
            <option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option>
    <?php };?>
    </select></td>
  <td id="staffno"></td>
</tr>

Ajax方面：

<script type="text/javascript">
$(document).ready(function() {
    $("#subloc").change(function(){
        var sname = $("#subloc option:selected").val();
        $.ajax({
            type:"POST",
            url:"process-opno.php",
            data:{opname:sname}
        }).done(function(data3){
            $("#staffno").html(data3);  
        });
    });
});
</script>

当subloc id成功选择到staffno id时，上面提取第一行。但它并没有为其余的线做到这一点。我能做什么，它会识别第二行，第三行等，并将相应的员工编号提取到staffno id中。

感谢。

Answer 1

请试试这个：

PHP部分我为选择框添加了classes并选择了框ajax结果

<tr>
<?php 
    $c=0; 
    $st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'"); 
    while($r = mysqli_fetch_array($st)){  
    $c++;
?> 
    <td><?php echo $c;?></td>
    <td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td>
    <td>
        <select name="opname[]" class="form-control js-sel-box" data-id="<?php echo $c;?>">
            <option>Select...</option>
            <?php  
                $fs = getOperators($_SESSION['location']); 
                while($f = mysqli_fetch_array($fs)){
            ?>
                    <option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option>
            <?php 
                };
            ?>
        </select>
    </td>
    <td class="js-sel-box-ajax-result-<?php echo $c;?>"></td>
<?php 
    }//End While
?>
</tr>

Ajax部分：

<script type="text/javascript">
$(document).ready(function() {
    $(".js-sel-box").change(function(){
        var sname = $(this).val();
        var result_id = $(this).attr("data-id");
        $.ajax({
            type:"POST",
            url:"process-opno.php",
            data:{opname:sname}
        }).done(function(data3){
            $(".js-sel-box-ajax-result-"+result_id).html(data3);  
        });
    });
});
</script>

Answer 2

与唯一ID相同的旧问题，将id更改为类，根据更改的选择查找所有元素

<script type="text/javascript">
$(document).ready(function() {
  $("td select.form-control").change(function(){
    var sname = $(this).val();
    var el = $(this);
    $.ajax({type:"POST",url:"process-opno.php",data:{opname:sname}})
    .done(function(data3){
    $(this).parent().next("td").html(data3);  
    });
  });
});
</script>

Answer 3

是的，最好使用类标识符而不是id来标识多个DOM元素;但在你的手中，它可以在最小的变化下工作 -

// use 
var sname = $(this).val();
//put this line just var sname
var $object =$(this);
// instead of 
var sname = $("#subloc option:selected").val();
// this is because- $('#subloc option:selected').val(); always returns the first 
//dropdownList/optionlist from the DOM array, you can use `this` to track which DOM has been change recently 

 // another change in your code $object is $(this) equivalent but will not work inside ajax so you need to create $object as in code above..
 // put this line 
 $($object).parents('tr').find("#staffno").html(data3);
 //instead of 
 $("#staffno").html(data3);
 // above line will search parent tr and will look for DOM element with id staffno a

使用php-Ajax动态填充数据库中的每一行

3 个答案: