ドロップダウンリストに値のリストを設定する方法

Question

2つの選択ドロップダウンがあります。 1つのドロップダウンから値を選択すると、もう1つの値に対応する値が入力されます。 onchange機能の間に

<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> 

、私はコントローラへの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);   

      }); 

     } 
    }); 
} 

警告アラートが私のAjaxの機能である（「成功のAjax機能内部」+データ）が値で起動していますが、2番目のドロップダウンでは表示できません。値は、[0000-00.00,0001-00.00,0002-00.07] ような値のliistこれはJsonComparison.findAllByDateValueは、値のリストを返すか、他されるよう

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 


    } 

私はそれを正しくレンダリングしています私のコントローラクラスであります私はそれを表示中に間違っている。応答を受け取ったら、2番目の選択は空になり、値を入れません。

Answer 1

問題はここにある：

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

あなたは「未定義」を反復処理し、返されるデータのセット全体で各オプションを埋めるためにしてみてください。

render wayB.wayBill as JSON 

を、ドロップダウン移入ときにJSでこのJSONをパース：私のAJAX成功内部

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

Answer 2

ドロップドウォンにオプションを追加する方法は修正されます。次のコードが役立つかどうか確認してください！

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'); 
      }; 

     } 
    }); 
}