Question

我试图在几个网页上重复使用相同的代码来整理代码，尤其是当在页面上使用一次/几次相同的AJAX响应时。回复是<option>的{{1}}列表。

在对数据库页面加载的新输入中，我希望<select>填充正确的<select>。

在UPDATE到数据库页面加载时，我希望<options>最初填充选定的<select>，但是当<option selected>被触发时，级联.change必须更新相应

一切都按预期工作，直到我决定重用相同的代码（来自Ajax的响应），而不是在每个<select>内部使用单独的php语法。

现在，当页面加载时，所有div中的<select>值将被最后一个值覆盖。

关于如何实现这一目标的任何想法？

到目前为止，这是我的代码：

webpage.php

<select>

jquery的：

<div class="form-group">
    <div class="col-xs-2"><input type="hidden" class="deptList_value" value="<?php echo $row['fDeptFK'];?>">
        <select class="form-control deptList" name="deptFK" onchange="getId(this.value);" required>
        </select>
    </div>
    <div class="col-xs-2"><input type="" class="areaList_value" value="<?php echo $row['PK'].'-'.$row['fDeptFK'].'-'.$row['fAreaFK'];?>">
         <select class="form-control areaList" name="areaFK" required>
         </select>
    </div>
</div>

getdataAreaQA.php

$(document).ready(function(){

$(".deptList_value").each(function() {
    var deptPK = $(this).val();
    //alert(deptPK);
    $.ajax({
           url:"../GetData_DropDown/getdataDeptQA.php",
           method:"POST",
           data:{DeptNo:deptPK},
           dataType:"text",
           success:function(data)
           {
                $('.deptList').html(data);
           }
    });
});

$(".areaList_value").each(function() {
    var arr = $(this).val().split('-');
    var idPK = arr[0];
    var deptPK = arr[1];
    var areaPK =arr[2];

    $.ajax({
            url:"../GetData_DropDown/getdataAreaQA.php",
            method:"POST",
            data:{AreaNo:areaPK,DeptNo:deptPK},
            dataType:"text",
            success:function(data)
            {
                 $('.areaList').html(data);
            }
    });
});

$('.deptList').change(function(){
    var deptPK = $(this).val();

    $.ajax({
            url:"../GetData_DropDown/getdataAreaQA.php",
            method:"POST",
            data:{DeptNo:deptPK},
            dataType:"text",
            success:function(data)
            {
                 $('.areaList').html(data);
            }
    });
});

EDIT 未经测试，但这应该适用于数据库中包含单行的页面。问题在于在一个页面上具有多行的分页页面。

Answer 1

我建议您进一步简化，并将专门的id与您的class处理程序结合使用。

让我们首先调整循环中的行输出：

<?php 
$idx = 0;
/* your foreach/for/while loop */ {
    $idx++;// just ensuring a unique value to utilize
?>
<div class="form-group">
    <div class="col-xs-2">
        <select id="dept_<?php echo $idx;?>" 
                data-dept="<?php echo $row['fDeptFK'];?>" 
                data-idx="<?php echo $idx;?>" 
                class="form-control deptList" name="deptFK" required>
        </select>
    </div>
    <div class="col-xs-2">
         <select id="area_<?php echo $idx;?>" 
                 data-dept="<?php echo $row['fDeptFK'];?>" 
                 data-area="<?php echo $row['fAreaFK'];?>" 
                 data-idx="<?php echo $idx;?>" 
                 class="form-control areaList" name="areaFK" required>
         </select>
    </div>
</div>
<?php }?>

无需隐藏输入。数据变量将包含您需要的所有内容。请注意，每个id每行输出应该是唯一的。

现在对jquery稍作调整：

$(document).ready(function(){

    $(".deptList").each(function() {
        var idx   = $(this).data('idx');// the unique row id
        var dept  = $(this).data('dept');
        $.ajax({
               url:"../GetData_DropDown/getdataDeptQA.php",
               method:"POST",
               data:{DeptNo: dept},
               dataType:"html",
               success:function(data)
               {
                    $("#dept_"+idx).html(data);// targets unique id
               }
        });
    });

    $(".areaList").each(function() {
        var idx   = $(this).data('idx');
        var dept  = $(this).data('dept');
        var area  = $(this).data('area');
        $.ajax({
                url:"../GetData_DropDown/getdataAreaQA.php",
                method:"POST",
                data:{AreaNo: area, DeptNo: dept},
                dataType:"html",
                success:function(data)
                {
                     $("#area_"+idx).html(data);
                }
        });
    });

    $('.deptList').change(function(){
        var idx   = $(this).data('idx');
        var dept  = $(this).val();// using .val not .data
        $.ajax({
                url:"../GetData_DropDown/getdataAreaQA.php",
                method:"POST",
                data:{DeptNo: dept},
                dataType:"html",
                success:function(data)
                {
                     $("#area_"+idx).html(data);// targets area select
                     // you may want to update the area selects data too:
                     $("#area_"+idx).data('dept', dept);
                }
        });
    });

});

通过使用行idx值进行定位，您可以确保更改哪些子选择选项。所有数据变量都包含最初填充select选项所需的值。

重要提示

正如我们通过评论发现的......如果您尝试在data-varNAME中使用大写字母，则在使用.data() jquery方法访问它时将导致未定义。因此，请确保data-varname的命名没有上限，这样就可以了。

在页面加载和更改时将多个div中的值传递给ajax

1 个答案: