3

私は4つの選択リストを持っています。ページの読み込み時に読み込まれる最初のコンテンツ。お互いの内容は、前のリストで選択したアイテムによって異なります。

リスト内のURLアドレスからデータをロードする関数が1つあります。これは、ユーザーが各リストで値を1つずつ選択する場合に正常に機能します。コードからすべての値を設定する必要がある場合があり、それが問題になります。

今、私はこのような機能を持っています：

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は選択リストです

問題は、2番目のリストから項目を選択する必要がある場合、Ajax関数がまだ実行されていないため、まだ空であるということです。

イベントchange（）が完了するのを待たなければならない主な質問。これは、コンテンツをフィルタリングする前に、selectにコンテンツをロードします。

$ .Deferred（）については知っていますが、このコードに適用する方法がわかりません。

4

1 に答える 1

0

myval1まず、、、 ...はクラスではなくidにする必要があると思いmyval2ます（要素を一意に識別するように見えるため）。次に、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を直接使用することで、現在作業中のオブジェクトを取得できます...

したがって、要約すると、キー内の関数でコールバック関数を使用する必要がajaxsuccessあります。

これがお役に立てば幸いです...

于 2012-11-22T09:15:44.010 に答える