Question

My json response is like this (as per firebug)

[
{
    "value": 1,
    "text": "Bill_Process_1",
    "selected": false,
    "imageSrc": "image.jpg",
    "description": "Bill_Process_1"
},
{
    "value": 2,
    "text": "Bill_Process_2",
    "selected": false,
    "imageSrc": "image.jpg",
    "description": "Bill_Process_2"
},
{
    "value": 3,
    "text": "Bill_Process_3",
    "selected": false,
    "imageSrc": "image.jpg",
    "description": "Bill_Process_3"
},
{
    "value": 4,
    "text": "Bill_Process_4",
    "selected": false,
    "imageSrc": "image.jpg",
    "description": "Bill_Process_4"
},
{
    "value": 5,
    "text": "Bill_Process_5",
    "selected": false,
    "imageSrc": "image.jpg",
    "description": "Bill_Process_5"
}

]

Please help me to complete this code.its just show empty drop down.
I’m confused with how to render it to here..

        <div id="myDropdown"></div>
<script type="text/javascript">
    var jsonurl = 'dropDown.html';
    $.ajax({
          type: 'GET',
          url: jsonurl,
          data: {},
          success:function(data){
                 var options = $("#myDropdown");
                 $.each(data, function () {
                     alert(data);
                     options.append($("<option />").val(this.value).text(this.text));                        
                 });
             },
          error:function(){             
          }
        });     

    $('#myDropdown').ddslick({
        data : jsonurl,
        width : 300,
        selectText : "Select the bill process",
        imagePosition : "right",
        onSelected : function(selectedData) {
            //callback function: do something with selectedData;
        }
    });
</script>

I used spring @ResponseBody to return this json array.

I used ddslick for my drop down.here shows it is

ddslick drop down by jquery code

Now my out put like this.its not data loaded to div as drop down and on webpage it shows as list one by one

Answer 1

You should go with something like this:

 success:function(data){
     var options = $("#myDropdown");
     $.each(data, function () {
         options.append($("<option />").val(this.value).text(this.text));
     });
 },

in your AJAX success handler to solve the problem of drop-down being empty. I’m not too sure what you’d like to achieve on select.