Question

I have been stuck on this problem for almost 2 days now, consider the following code:

‘.country-select’ occurs twice in the form ( input),

$('.branch-row').hide();
$('.country-select').change(function(){
    console.log($(this));
    country_select = $(this);
    $.get('get_country_branches.php',
        'country=' + $("'#" + country_select.attr('id') + " option:selected'").val() + '&field=' + $(':input:eq('+($(":input").index(country_select) + 1) +')').attr('name'),
        function(html){
            $(':input:eq('+($(":input").index(country_select) + 1) +')').html(html);
            //debug 1
            console.log(country_select);
            country_select.parent().parent().next().show();
        },
        'html'
    );

}).change();
//debug 2
console.log(country_select);

the output from the debug 1 are both the same object:

[select#pays-dem.country-select]
[select#pays-dem.country-select]

however the output from debug 2 is correct:

[select#pays-enlev.country-select]
[select#pays-dem.country-select]

It seems that the problem lies within the $.get() AJAX function and the country_select object.. Any idea wtf is going on?

Answer 1

By not putting var in front of the country_select variable, it’s being bound in the global space rather than local to the function. Also, I don’t think you need to requery to get the selected value of the select. Using val() ought to be enough. I’d try to simplify the selection of what I think is the next input following the select. Try something like this:

$('.country-select').change(function(){
    console.log($(this));
    var country_select = $(this);
    $.get('get_country_branches.php',
        'country=' + country_select.val() + '&field=' + country_select.next('input:first').attr('name'),
        function(html){
            country_select.next('input:first').html(html);
            //debug 1
            console.log(country_select);
            country_select.parent().parent().next().show();
        },
        'html'
    );

}).change();

BTW, this will break the console.log following the function since the variable is no longer in the global scope.