onchange find this parent

Question

Hi i am really stack.

I have a few select boxes (at least 5) with the following structure

<li>
   <div>
      <select name="sb[]">...</select>
   </div>
</li>

When a sb change i want to make an ajax call pass the selected value and replace the content of parent li with the html receive from ajax.

I tried the following

onchange="
    $.get('file.php', { action: 'dothis'}, function(html) { 
      $(this).parent('li').html(html);
    });
"

but is not working

Any Help

Answer 1

$('select[name="sb[]"]').change(function(){
   var $this = $(this);
   $.get('file.php', { action: 'dothis'}, function(html) { 
      $this.closest('li').html(html);
    });
})

Answer 2

If you really, really want to, you could still do this in the onchange attribute. The problem is (as pointed out) twofold: firstly, the this inside the ajax callback is not the same this anymore as in the change event handler, secondly you should be using closest() or parents():

onchange="
    var select = $(this);
    $.get('file.php', { action: 'dothis'}, function(html) { 
      select.closest('li').html(html);
    });
"

or

onchange="
    $.get('file.php', { action: 'dothis'}, $.proxy(function(html) { 
      $(this).closest('li').html(html);
    }, this));
"