带有 ajax 的 jQuery .change() 需要刷新组合框

Question

所以我的代码似乎是正确的；但是，组合框仅在我刷新页面后才会更改；这不是我对 $.change() 的预期。

在当前代码之前，我有两个单独的 ajax 调用。一个会清除所有复选框，另一个会设置它们。这在没有页面刷新的情况下工作；但是，有时会选中不正确的框（甚至不选中正确的框）。

我已经通过firebug检查了php的所有返回，结果和预期的一样。

代码使用 jQuery v1.5.1，因为我使用的是 jQuery UI。

提前致谢！

PHP

<?php

require 'config.php';

if(!empty($_GET['usr'])) {

    //Retrieve committee banks list
    $db->query('SELECT * FROM clas_gov_app_meeting_access_list WHERE usr="committeebank"');
    $committeebank = $db->get();

    //Retrieve selected users permissions
    $db->query('SELECT * FROM clas_gov_app_meeting_access_list WHERE usr="'. $_GET['usr'].'"');
    $accesslist = $db->get();

    //Echo user permissions
    echo $accesslist[0]['isadmin'];

    //Combine committebank's and users permissions sepereated with a slash
    $accesslist[0]['accessto'] = $committeebank[0]['accessto'] .',/,' . $accesslist[0]['accessto'];
    //Explode on commas
    $accesslist = explode(',',$accesslist[0]['accessto']);

    //Echo each value
    foreach($accesslist as $key => $value) {
        echo $value.' ';
    }
}

?>

JavaScript / jQuery

​​>

    <script type="text/javascript">
    function SetCheckboxes() {  

        var usr = $('#KUOID2').find('option:selected').val();
        $.ajax({
            url : 'ajaxLoadAccess.php?usr=' + usr,
            dataType : "text",
            success : function(response) {      


                //first char echoed is a single identifier for admin status
                var isAdmin = response.charAt(1);
                //clear that from the string
                response = response.replace(response.charAt(1), '');


                //committebank is first, and seperated from usr by a slash
                split_response = response.split("/");
                //want to clear checkboxes from the committebank and set from the usr
                ClearCheckboxes = split_response[0].split(" ");
                SetCheckboxes = split_response[1].split(" ");

                //CLEAR CHECKBOXES

                //For each value in the array
                for(var i in ClearCheckboxes) {
                    //Skipping over empty checkboxes
                    if(ClearCheckboxes[i] != '') {                              
                        //Check the boxes that need to
                        if($('input[name='+ClearCheckboxes[i]+'2]').attr('checked')) {
                            $('input[name='+ClearCheckboxes[i]+'2]').attr('checked', false);
                        }
                    }
                }

                ClearCheckboxes = [];

                //SET CHECKBOXES

                //For each value in the array
                for(var i in SetCheckboxes) {
                    //Skipping over empty checkboxes
                    if(SetCheckboxes[i] != '') {                                
                        //Check the boxes that need to
                        $('input[name='+SetCheckboxes[i]+'2]').attr('checked', true);
                    }
                }

                SetCheckboxes = [];

                if(isAdmin>0) {
                    $('input[name=isAdmin2]').attr('checked', true);
                } else {
                    $('input[name=isAdmin2]').attr('checked', false);   
                }

            }
        });
    }

$(document).ready(function() {
    $(function() {
        $( "#tabs" ).tabs();
    });

     SetCheckboxes();

     $("select").change(function() {
        SetCheckboxes();
    });
});
</script>

Answer 1

突出显示的行是代码中的罪魁祸首。您在同一函数中使用 SetCheckboxes 作为变量，而不是使用 var 来声明它。请使用下面的代码，希望它对你有用。

<script type="text/javascript">
    function SetCheckboxes() {  

        var usr = $('#KUOID2').find('option:selected').val();
        $.ajax({
            url : 'ajaxLoadAccess.php?usr=' + usr,
            dataType : "text",
            success : function(response) {      


                //first char echoed is a single identifier for admin status
                var isAdmin = response.charAt(1);
                //clear that from the string
                response = response.replace(response.charAt(1), '');


                //committebank is first, and seperated from usr by a slash
                split_response = response.split("/");
                //want to clear checkboxes from the committebank and set from the usr
                **var ClearCheckboxes = split_response[0].split(" ");
                var SetCheckboxes = split_response[1].split(" ");//You should always use var to declare the js variables otherwise they are in global scope.**

                //CLEAR CHECKBOXES

                //For each value in the array
                for(var i in ClearCheckboxes) {
                    //Skipping over empty checkboxes
                    if(ClearCheckboxes[i] != '') {                              
                        //Check the boxes that need to
                        if($('input[name='+ClearCheckboxes[i]+'2]').attr('checked')) {
                            $('input[name='+ClearCheckboxes[i]+'2]').attr('checked', false);
                        }
                    }
                }

                ClearCheckboxes = [];

                //SET CHECKBOXES

                //For each value in the array
                for(var i in SetCheckboxes) {
                    //Skipping over empty checkboxes
                    if(SetCheckboxes[i] != '') {                                
                        //Check the boxes that need to
                        $('input[name='+SetCheckboxes[i]+'2]').attr('checked', true);
                    }
                }

                SetCheckboxes = [];

                if(isAdmin>0) {
                    $('input[name=isAdmin2]').attr('checked', true);
                } else {
                    $('input[name=isAdmin2]').attr('checked', false);   
                }

            }
        });
    }

$(document).ready(function() {
    $(function() {
        $( "#tabs" ).tabs();
    });

     SetCheckboxes();

     $("select").change(function() {
        SetCheckboxes();
    });
});
</script>