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

Question

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

我加载<select>-boxes以前的回复<select>-box。所以我做了一个简单的函数来保存一些代码。那就是：

$(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> -boxes，但我会需要使用至少八（全部采用相同的父上面的代码）。有什么方法可以优化或保存更多代码？

我的第二个问题是：

当由PHP文件返回的数组的长度只有一个元素，那么它会调用它的单击事件的功能，并装载下一个<select> -box因为用户只能选择该选项。

我不知道怎么什么更好的方式来做到这一点，becouse如果我在PHP文件控制它，那么我不知道如何发送的HTML 文件响应并对其进行处理。

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

Answer 1

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 
     } 
    }); 
};