JQuery ajax callback function

Question

Hello,

I'm very new to JQuery and I try to fill my html select boxes with Jquery but they stay empty. Below is my code:

   $('select').each(function(){
      var action = 'SELECT_FLDS_GRID';
      var fldnam = $(this).attr('name');
      $.getJSON('frm.grid.php',{'action':action,'fldnam':fldnam},function(j){
         var_SelectOption(j,fldnam);
      });
   });
   function var_SelectOption(j,myfld)
   {
      var options = '';
      for(var i=0;i<j.length;i++)
      {
         options += '<option value="' + j[i].option + '">' + j[i].option + '</option>';
      }
      $('select').each(function(){
         if($(this).attr('name') == myfld) {$(this).html(options);}
      });
   } 

For clarification, if I change var_SelectOption with below code I do get a result:

   function var_SelectOption(j,myfld)
   {
      var options = '';
      for(var i=0;i<j.length;i++)
      {
         options += '<option value="' + j[i].option + '">' + j[i].option + '</option>';
      }
      $('select').html(options);
   } 

However that's of course not the intention as this just puts the same optionlist to each select box. So this is just to show where the problem is; the optionlist strings would need to get attached to the proper select element.

I've been playing with it for quite some time but can't find the issue. I'm even wondering if I'm doing it completely wrong... Hopefully somebody can help me here.

regards, Patrick

Answer 1

Try $('select[name="'+myfld+'"]').html(options);