如何優化和/或簡化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 
     } 
    }); 
};