jquery - 如何在下拉列表中填充值列表

Question

我有两个选择下拉菜单。如果我从一个下拉列表中选择值，则另一个下拉列表应填充相应的值。

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

在onchange函数中，我正在对 Controller 进行AJAX调用并获取值
这是我的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);        

           });

        } 
    });
}

警报alert(“成功ajax函数内部” + data)正在使用这些值触发，但无法在第二个下拉列表中显示。这些值代表[0000-00.00,0001-00.00,0002-00.07]之类的值
这是我的 Controller 课

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


    }

我是否正确呈现它，因为JsonComparison.findAllByDateValue将返回值列表，否则我在显示它时做错了。一旦我收到响应，第二个选择将变为空，并且没有将值放入其中

Answer 1

问题在这里:

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

您尝试对“未定义”进行迭代，并使用返回的数据集填充每个选项。

我也建议将 Controller 中返回的列表转换为JSON:

render wayB.wayBill as JSON

然后在填充下拉列表时使用JS解析此JSON:

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