Question

我有一个HTML页面，它使用jQuery和AJAX与PHP文件进行交互，我希望改进和实现一些东西。

我使用previus <select> - 框返回的响应加载<select> - 框。所以我做了一个简单的函数来保存一些代码。这是：

$(document).ready(function(){ 

    $("#sex").click(function(){ 
        getPHPdata("sex", "age");
    }); 

    $("#age").click(function(){ 
        getPHPdata("age", "work");
    }); 

    $("#work").click(function(){ 
        getPHPdata("work", "country");
    }); 

    $("#country").click(function(){ 
        getPHPdata("country", "city");
    }); 

    function getPHPdata(oASelect, oFSelect) {
        $("#" + oFSelect).empty();

        $.ajax({
            type: 'POST',
            url: 'loadselect.php',
            data: 'id=' + encodeURIComponent(oASelect) + "&p=" + encodeURIComponent($("#" + oASelect).val()),
            dataType: 'json',
            success: function(data){
                for (var i = 0; i < data.length; i++) {
                    $("#" + oFSelect).append("<option>" + data[i] + "</option>");
                }
            }
        });
    };

});

好吧，在这段代码中我只有四个<select> - 盒子，但我需要使用至少八个（所有使用与上面代码相同的父代）。有什么方法可以优化它或保存更多代码？

我的第二个问题是：

当PHP文件返回的数组长度只有一个元素时，它会调用其click事件的函数并加载下一个<select> - 框，因为用户只能选择该选项

我不知道怎么做更好的方法，因为如果我在 php 文件中控制它，那么我不知道如何发送响应并在 html 文件。

我希望我的解释清楚。任何帮助，建议或示例将不胜感激。如果您需要更多详细信息，请通知我，我将编辑该帖子。

Answer 1

第一个问题：只要您使用HTML5 ...

，请使用HTML5数据属性

<select data-name='work' data-target='country' ...>
   <option...></option>
</select>

然后在JS

$('select').on('click', function () {
    getPHPData($(this).data('name'), $(this).data('target'));
});

第二个问题：

我不确定触发“更改”事件的方法，特别是因为我不确定你是否绑定它而不是“点击”，但我看了一下这个帖子： Trigger change() event when setting <select>'s value with val() function

我认为这段代码应该可行，如果没有，请告诉我，我会尝试JSFiddle。

function getPHPdata(oASelect, oFSelect) {
    $("#" + oFSelect).empty();

    $.ajax({
        type: 'POST',
        url: 'loadselect.php',
        data: 'id=' + encodeURIComponent(oASelect) + "&p=" + encodeURIComponent($("#" + oASelect).val()),
        dataType: 'json',
        success: function(data) {
            if (data.length == 1) {
                // It is a bit difficult to choose the right way for changing a select automatically,
                // I would suggest you to take a look at this:
                // https://stackoverflow.com/questions/5760873/trigger-change-event-when-setting-selects-value-with-val-function
                $("#" + oFSelect).append("<option>" + data[0] + "</option>").val(data[0]).trigger('click');
            } else {
                for (var i = 0; i < data.length; i++) {
                    $("#" + oFSelect).append("<option>" + data[i] + "</option>");
                }
            }
        },
        error: function (response) {
            // Manage any error here
        }
    });
};

如何优化和/或简化jQuery和PHP的这种交互？

1 个答案: