如何使用此代码使用getJSON

时间:2014-02-17 10:38:00

标签: javascript jquery html json getjson

我刚刚使用这个链式选择框工作,它使用JSON数据填充选项。 Fiddle。数据是硬编码的,但我想使用$.getJSON()方法加载数据,但我无法正确获取代码。我认为suggest.json文件是被触发的,但是其他东西似乎导致了这个问题。有人请告诉我如何解决这个问题吗?

我从this site

获得了The Drop down Box

原始代码:

<script type="text/javascript">

var s = '[{"Box1":"Africa","CODE":1,"ID":"A"},{"Box1":"Asia","CODE":2,"ID":"B"},{"Box1":"South America","Code":3,"ID":"C"}]';


var jsonData = $.parseJSON(s);

var $select = $('#mySelectID');
$(jsonData).each(function (index, o) {    
    var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
    $select.append($option);
});

jQuery("#mySelectID").dynamicDropdown({"delimiter":"|"});

</script>

这是我失败的尝试:

  <script type="text/javascript">

  $.getJSON('suggest.json', function(data){

  var $select = $('#mySelectID');

  $.each(data, function (index, o) {

  var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
    $select.append($option);
  });

  });
  jQuery("#mySelectID").dynamicDropdown({"delimiter":"|"});
  </script>

Suggest.JSON:

[{"Box1":"Africa","CODE":1,"ID":"A"},{"Box1":"Asia","CODE":2,"ID":"B"},{"Box1":"South America","Code":3,"ID":"C"}]

1 个答案:

答案 0 :(得分:1)

问题是,只有当getJSON返回数据时,才需要调用$("#mySelectID").dynamicDropdown({"delimiter":"|"});

根据你的代码,只需交换插件调用:

$(document).ready(function(){
    $.getJSON('my.json', function(data){

        var $select = $('#mySelectID');

        $.each(data, function (index, o) {
            var $option = $("<option/>").attr("value", o.CODE).text(o.Box1 + "|" + o.ID);
            $select.append($option);
        });

        $("#mySelectID").dynamicDropdown({"delimiter":"|"});

    });
});

顺便说一句,你的json有错误:最后一项(南美洲)有“代码”并注明“根据其他人的代码”