Question

i have 4 select lists. Content of the first one loading on page load. The contents of each other depends on the selected item in the previous list.

I have one function, which loads the data from the url address in the list. This works fine when the user selects a value by one in each list.
Sometimes it is necessary to set all the values ​​from the code and it is a problem.

Now, i have function like this:

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 are select lists

The problem is that when we need to select an item from the second list, it is still empty, because Ajax function has not yet done.

The main question that must wait for the event change() done, which loads the content in select before we filter content in it

I know about $.Deferred() but do not know how to apply it to this code.

Answer 1

First I think that myval1, myval2, … should be ids instead of classes (since it seems to uniquely identify an element) and second, you should refactor your code in order to improve readability since you make the same thing for your 4 elements :

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

Here I give index to the different functions, but you can get the object on which we are currently working on by using keyword this directly…

So, to summarize, you should use a callback function in your ajax function inside the key success.

Hope this will help you…