0

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

我<select>使用 previus -box 返回的响应加载 -boxes <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>-box，但我至少需要使用八个（都使用与上面代码相​​同的父级）。有什么办法可以优化或节省更多代码？

我的第二个问题是：

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

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

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

4

1 回答 1

3

第一个问题：使用HTML5数据属性，只要你使用HTML5...

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

然后在 JS

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

第二个问题：

我不确定触发“更改”事件的方式，特别是因为我不确定您绑定它而不是“单击”，但我查看了这个线程： 设置 <select 时触发 change() 事件> 带有 val() 函数的值

我认为这段代码应该可以工作，如果没有，请告诉我，我会尝试 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
        }
    });
};
于 2013-04-20T19:17:50.820 回答