jQuery: ajax() / jsonp: cross browser

I have a cross-browser form that is called in an iframe. The form has 'dynamic' select menus. I am using the jQuery getJSON() function to query the data. I have been unable to successfully update the select menu with the following code, it seems like it should work wikiPresto. The data is returning (i can see it in firebug) but the select is not updating...

Any thoughts on what i am doing wrong?

note: #foo 开发者_如何学运维and #bar are select menus...

var $f = $('#foo');
var $b = $('#bar');
$b.change(function() {
    var foo = $f.val();
    var bar = $b.val();
    $.getJSON("http://example.com/form.php", {f: foo, b: bar},
        function(foo){
            varbar = $('#foo');
            varbar.html(foo.data);
        }
    );
});

If this page is not also on http://example.com, then you need to use JSONP.

Add ?callback=? to the url, to make jQuery use JSONP.

$.getJSON("http://example.com/form.php?callback=?", {f: foo, b: bar},
  function(foo){
  }
);

form.php will have to wrap the JSON in the value of $_GET['callback']. The data returned from form.php should look like this:

callback({data: 'test'});

Wikipedia article on JSONP