getjson()jquery下拉列表无法正常工作

时间:2011-08-29 07:41:19

标签: javascript jquery json getjson

我有以下json文件:

{
"viewport_size":
              {"display_name":"VIEWPORT SIZE:",
               "name":"viewport_size",
                "format":"number",
                 "type":"dropdown",
                 "dflt":"640 * 480",
                 "values":["800*600","1280*720","1920*1080"],
                 "isMandatory":"true"},
 "framerate":
                {"display_name":"FRAMERATE:",
                 "name":"fps",
                 "format":"number",
                 "type":"dropdown",
                 "dflt":"30",
                 "values":["45","60","90"],
                "isMandatory":"true"},
"pattern_resolution":
               { "display_name":"PATTERN RESOLUTION:",
                 "name":"resoln",
                 "format":"number",
                 "type":"dropdown",
                 "dflt":"8",
                 "values":["16","32","64"],
                 "isMandatory":"true"}
 }

我正在尝试使用getJSON()

填充我的js文件中的下拉列表
  var INPUT_TEXT='<input type="text"/>';
    var INPUT_RADIO='<input type="radio"/>';
    var INPUT_CHECKBOX='<input type="checkbox"/>';
    var INPUT_DROPDOWN='<select id="items"></select>';
    var SUBMIT_BUTTON='<input type="button" value="SUBMIT"/>';
    var NEWLINE='<br></br>';

$.getJSON('json_input/client_settings_input.json',function(clientData)
{   
$.each(clientData,function(i,feild)
{
    if(this.type=="dropdown")
    { 
        var html = '';    
        var len = feild.values.length;    
        //alert('lenght is'+len);
        for (var i = 0; i< len; i++){        
            //alert('inside for');
            html += '<option>'+ feild.values[i]+'</option>';   
        }
            $('body #tabs #tabs-2 client').append  (this.display_name).append(INPUT_DROPDOWN).append(html).append(NEWLINE);         
    }
         });    

$('body #tabs #tabs-2 #client').append(SUBMIT_BUTTON);
});

但我无法查看下拉列表和值...请指出我出错的地方..

我想像这个VIEWPORT:dropdownlist值一样填充                              FRAMERATE:下拉列表值                              PATTERN_RESOLUTION:下拉列表值

2 个答案:

答案 0 :(得分:0)

尝试

.append($(INPUT_DROPDOWN).html(html))

而不是.append(INPUT_DROPDOWN).append(html)

选项必须在select中,但插入的位置与select相同。 见http://jsfiddle.net/q7fWt/

答案 1 :(得分:0)

尝试添加参数“jsoncallback =?”到你的网址

$.getJSON('json_input/client_settings_input.json?jsoncallback=?',function(clientData)

jQuery将在jsoncallback参数之后用ID替换最后一个问号。

然后,将在服务器端使用此ID创建一个响应,该响应将以ID值命名的函数开始。

这会导致响应看起来像这样:

jQuery16205149872086476535_1314088378455({
  "viewport_size":
          {"display_name":"VIEWPORT SIZE:",
           "name":"viewport_size",
            "format":"number",
             "type":"dropdown",
             "dflt":"640 * 480",
             "values":["800*600","1280*720","1920*1080"],
             "isMandatory":"true"},
 "framerate":
            {"display_name":"FRAMERATE:",
             "name":"fps",
             "format":"number",
             "type":"dropdown",
             "dflt":"30",
             "values":["45","60","90"],
            "isMandatory":"true"},
 "pattern_resolution":
           { "display_name":"PATTERN RESOLUTION:",
             "name":"resoln",
             "format":"number",
             "type":"dropdown",
             "dflt":"8",
             "values":["16","32","64"],
             "isMandatory":"true"}
});

所以在一个简短的回答中,如果你的json响应没有包含在这个函数名中,那么回调函数就不会触发,相反你会得到一个错误,你可以这样看到:

$.getJSON('json_input/client_settings_input.json?jsoncallback=?',function(clientData) {

    //your code

}).error(function(jqXHR, textStatus, errorThrown) {
    alert("Error: " + textStatus + " errorThrown: " + errorThrown);
})

希望这有帮助

帕特里克