comment remplir une liste de valeurs dans une liste déroulante

Question

J'ai deux listes déroulantes de sélection. Si je sélectionne les valeurs d'une liste déroulante, l'autre doit être rempli avec les valeurs correspondantes.

<g:select name="firstText" from="${eventsList}" noSelection="['':'-Choose the From Date-']" onchange="categoryChanged(this.value)" /> 
      <label>WayBill Id</label> 
      <select id="bill"> 
       <option>Select Bill</option> 
      </select> 

Pendant la fonction onchange, je fais un appel AJAX à un contrôleur et d'obtenir les valeurs Ceci est ma fonction ajax

function categoryChanged(categoryId) { 
    alert(categoryId) 
    $.ajax({ 
     url:"<g:createLink url="[action:'categoryChanged',controller:'jsonComparison']" />", 
     asnyc: false, 
     data: {dateValue:categoryId}, 
     success: function(data){ 
      //var retrievedValue = JSON.parse(data); 
      alert("inside the success ajax function"+data) 

      //$("#wayBill1").val(retrievedValue.value1) 
      //$("#wayBill1").html(retrievedValue.value1) 
      //$('#wayBill1 :selected').text(); 
      var select = $('#bill'); 
      select.find('option').remove(); 
      $.each(retrievedValue,function() {    
        $('<option>').val(data).text(data).appendTo(select);   

      }); 

     } 
    }); 
} 

L'alerte d'alerte (« dans la réussite fonction ajax » + data) se déclenche avec les valeurs mais ne peut pas l'afficher dans la seconde liste déroulante. Les valeurs sont des valeurs liist comme [0000-00.00,0001-00.00,0002-00.07] Ceci est ma classe contrôleur

def categoryChanged(){ 
     String firstParameter = params?.dateValue 
     def reply 
     def wayB = [] 
     wayB = JsonComparison.findAllByDateValue(firstParameter) 
     println "wayBill id: "+wayB.Bill 
     //reply = [status:true, value1:"${wayB.Bill}"] 
     render wayB.wayBill as List 


    } 

je suis rendu correctement comme JsonComparison.findAllByDateValue sera le retour liste de valeurs ou d'autre Je le fais mal en l'affichant. Une fois que je reçois la réponse, la seconde sélection devient vide et elle ne place pas les valeurs

Answer 1

Le problème est ici:

$.each(retrievedValue,function() {    
    $('<option>').val(data).text(data).appendTo(select);   
}); 

Vous essayez de itérer le « non défini » et remplir chaque option avec un ensemble complet de données renvoyées.

Aussi je recommande de jeter la liste retournée en vous contrôleur dans JSON:

render wayB.wayBill as JSON 

Requérir et analyser ensuite ce JSON avec JS lors du remplissage de la liste déroulante:

$(data).each(function() { 
    $('<option>').val(this).text(this).appendTo(select); 
}); 

Answer 2

la façon dont vous ajoutez des options dans dropdwon doit être corrigée. S'il vous plaît voir si le code suivant aide !!!

function categoryChanged(categoryId) { 
    alert(categoryId) 
    $.ajax({ 
     url:"<g:createLink url="[action:'categoryChanged',controller:'jsonComparison']" />", 
     asnyc: false, 
     data: {dateValue:categoryId}, 
     success: function(data){ 
      var retrievedValue = JSON.parse(data); 
      alert("inside the success ajax function"+data) 

      //$("#wayBill1").val(retrievedValue.value1) 
      //$("#wayBill1").html(retrievedValue.value1) 
      //$('#wayBill1 :selected').text(); 
      var select = $('#bill'); 
      select.find('option').remove(); 

      for(i=0;i<retrievedValue.length;i++) 
      { 
      $('<option/>', { 
       value: retrievedValue[i], 
       html: retrievedValue[i] 
      }).appendTo('#bill select'); 
      }; 

     } 
    }); 
}