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函数期间，我正在对控制器进行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);        

           });

        } 
    });
}

警报警报（“成功ajax函数内部”+数据）正在触发值但无法在第二个下拉列表中显示。值为[0000-00.00,0001-00.00,0002-00.07]的值这是我的控制器类

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

你要在dropdwon中添加选项的方式是要纠正的。请查看以下代码是否有帮助!!!

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

        } 
    });
}

Answer 2

问题在于：

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

您尝试迭代未定义的＆＃39;并使用一整套返回的数据填充每个选项。

另外，我建议将控制器中返回的列表转换为JSON：

render wayB.wayBill as JSON

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

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

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

2 个答案: