ajax列表填充

Question

我有4個選擇列表。頁面加載時第一次加載的內容。彼此的內容取決於上一個列表中的選定項目。

我有一個函數，它從列表中的url地址加載數據。當用戶在每個列表中選擇一個值時，此功能正常工作。 有時需要設置代碼中的所有值，這是一個問題。現在

，我有這樣的功能：

var c = $('#container'); 
var f1 = c.find('.myval1').val(); 
var f2 = c.find('.myval2').val(); 
var f3 = c.find('.myval3').val(); 
var f4 = c.find('.myval4').val(); 

if(f1.length > 0){ 
c.find('.form').find('.s1').children('option').filter(function() { 
    return $(this).text().toLowerCase() == f1.toLowerCase(); 
}).attr('selected', 'selected'); 
parent.find('.search-form').find('.s1').change(); 
} 

if(f2.length > 0){ 
c.find('.form').find('.s2').children('option').filter(function() { 
    return $(this).text().toLowerCase() == f2.toLowerCase(); 
}).attr('selected', 'selected'); 
parent.find('.form').find('.s2').change(); 
} 

if(f3.length > 0){ 
c.find('.form').find('.s3').children('option').filter(function() { 
    return $(this).text().toLowerCase() == f3.toLowerCase(); 
}).attr('selected', 'selected'); 
parent.find('.form').find('.s3').change(); 
} 

if(f4.length > 0){ 
c.find('.form').find('.s4').children('option').filter(function() { 
    return $(this).text().toLowerCase() == f4.toLowerCase(); 
}).attr('selected', 'selected'); 
parent.find('.form').find('.s4').change(); 
} 

S1，S2，S3，S4是選擇列表

的問題是，當我們需要從第二個列表中選擇一個項目，它仍然是空的，因爲Ajax功能還沒有完成。

的主要問題必須等待事件的變化（）來完成，它加載之前，我們篩選的內容在裏面

我知道$ .Deferred（），但不知道如何選擇的內容將其應用於此代碼。

Answer 1

首先，我認爲myval1,myval2，...應該是ids而不是類（因爲它似乎唯一地標識一個元素），其次，爲了提高可讀性，您應該重構代碼，因爲你做了同樣的事情你4個元素：

var c = $('#container'); 

function init() { 

    for(var i = 0; i < 4; i++) { 
     updateList(c, c.find('#myval' + i).val(), i); 

     // I guess it is here that you have to update your lists 
     bindChange(i); 
    } 
} 

function updateList(c, f, i) { 
    if(f.length > 0) { 
     c.find('.form').find('.s' + i).children('option').filter(function() { 
      return $(this).text().toLowerCase() == f.toLowerCase(); 
     }).attr('selected', 'selected'); 

     // -> Here, is parent really different from c? And for the 1st element, 
     // is it filtered by the class .search-form instead of .form? 
     parent.find('.form').find('.s' + i).change(); 
    } 
} 


// New functions in order to trigger an update of the lists 
// and to update subsequent list 
function bindChange(i) { 
    parent.find('.form').find('.s' + i).on('change', updateContent(i)); 
} 

function updateContent(i) { 
    return function() { 
     $.ajax({ 
      url: 'yoursite.html', 
      data: yourdata, 
      success : updateSubsequentList(i) 
     }); 
    } 
} 

function updateSubsequentList(i) { 
    return function() { 
     var j = i + 1; 
     updateList(c, c.find('#myval' + j).val(), j); 
    } 
} 

這裏，我給指數的不同功能，但你可以在我們目前正在使用關鍵字this直接對象...

因此，要總結，你應該使用回調功能在你的ajax功能裏面的密鑰success。

希望這會幫助你...