3

我有 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 功能还没有完成。

必须等待事件 change() 完成的主要问题，它在我们过滤其中的内容之前加载 select 中的内容

我知道 $.Deferred() 但不知道如何将其应用于此代码。

4

1 回答 1

0

首先，我认为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在 key 内的success函数中使用回调函数。

希望对你有帮助...

于 2012-11-22T09:15:44.010 回答