0

私のjson応答は次のようになります(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"
}

]

このコードを完成させるのを手伝ってください。空のドロップダウンが表示されるだけです。私はそれをここにレンダリングする方法と混乱しています..

        <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 を使用しました。

jqueryコードによるddslickドロップダウン

今、私の出力はこのようなものです.ドロップダウンとしてdivにロードされたデータではなく、ウェブページではリストとして1つずつ表示されます

私の出力

4

2 に答える 2

1

これを試して

<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>
于 2012-11-26T04:41:23.167 に答える
1

あなたはこのようなもので行くべきです：

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

ドロップダウンが空になる問題を解決するために、AJAXサクセスハンドラーで。セレクトで何を達成したいのかよくわかりません。

于 2012-11-26T01:53:35.320 に答える