如何从ajax呈现下拉菜单

Question

我的 json 响应是这样的（根据萤火虫）

[
{
    "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"
}

]

请帮我完成这段代码。它只显示空的下拉菜单。 我对如何将它渲染到这里感到困惑..

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

我使用 spring @ResponseBody 来返回这个 json 数组。

我在下拉菜单中使用了 ddslick。这里显示它是

ddslick drop down by jquery code

现在我的输出是这样的。它没有将数据加载到 div 作为下拉列表，在网页上它显示为一个一个列表

Answer 1

你应该这样做：

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

在您的 AJAX 成功处理程序中解决下拉列表为空的问题。我不太确定你想在 select 上实现什么。

Answer 2

试试这个

<script type="text/javascript">
var jsonurl = 'dropDown.html';
$.ajax({
      type: 'GET',
      url: jsonurl,
      data: {},
      success:function(myData){
          $('#myDropdown').ddslick({
               data : myData,
               width : 300,
               selectText : "Select the bill process",
               imagePosition : "right",
               onSelected : function(selectedData) {
                //callback function: do something with selectedData;
               }
          });
      },
      error:function(){             
      }
    });
</script>