Question

$("select[name=field[]]").live("change", function() {
  $.getJSON("/json.php", {
    id: $(this).val(),
    ajax: 'true'
  }, function(j) {
    options = '';
    for (var i = 0; i < j.length; i++) {
      options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
    }
  });
  $(this).siblings("[name=logic[]]").html(options);
});

So, I’d like to stick the result of the json callback (which it puts in options, a global variable) into a sibling of the object that is activating the event in the first place. The code I have above almost succeeds at this, but doesn’t quite work because the callback doesn’t happen instantly, so it sticks a blank string in the sibling. Thanks in advance and sorry if I got any terminology wrong there 🙂

Answer 1

I think you’re looking at it backwards. You can make outer variables available to the inner function more easily. Here’s the idea:

$("select[name=field[]]").live("change", function() {
    var theSelect = $(this);
    $.getJSON("/json.php",{id: $(this).val(), ajax: 'true'}, function(j){
        options = '';
            for (var i = 0; i < j.length; i++) {
                   options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            theSelect.siblings("[name=logic[]]").html(options);
            });
    });

I have a concern also. It appears that you’re trying to add the options into the select that triggered the event. They are children, not siblings. They way you have it, this will add options to every select that is a sibling of the event source. If my assumption is correct, you could do something like this in your inner for loop, rather than building a gigantic HTML string:

$('<option>blah blah</option>').appendTo(theSelect);