从List <t>中检索数据并使用Jquery </t>将其放入下拉列表中

Question

我从数据库中检索了数据并将其放入List中。我需要使用Jquery访问这个项目列表并将它们放在下拉列表中。这是我在Controller中的代码

//filling list with data from data reader
List<Object> list=new List<Object>();
                while (read.Read())
                {
                    var var1 = (int)read["dbColumn"];
                    var var2 = (string)read["dbColumn2"];
                    list.Add(var1);
                    list.Add(var2);
                }



            var serializer=new System.Web.Script.Serialization.JavaScriptSerializer();
            string theData = serializer.Serialize(list);
           return theData;

在我的jquery中我有这个

if (!$.isEmptyObject(data))
        {
            var html = "";
            var len = data.length;
            for (var i = 0; i < len; i++) {
                var first = [data[i].dbColumn];
                var second = [data[i].dbColumn2];

                html += '<option value=' + first + '>' + second + '</option>';
            }
            $('#SelectBox').html("<option>"+html+"</option>").show();
        }

然后我将此作为Html代码，我想要显示列表

<select id="SelectBox"></select>

当我尝试这个时，我得到一个空的选项字段的looooooong列表。可能是什么问题

Answer 1

请勿在{{1​​}}中包含选择控件的内容。

<option>

Answer 2

您只是返回序列化的List<Object>，因此您的结果中没有dbColumn1或dbColumn2。

可能值得创建一个包装类或使用Dictionary<int, string>作为结果但是为了使它使用当前代码，您可以将jQuery代码更改为：

var html = "";
var len = data.length;
for (var i = 0; i < len; i++) {
    var first = [data[i]];
    var second = [data[++i]];

    html += '<option value=' + first + '>' + second + '</option>';
}
$('#SelectBox').html(html).show();

请注意，对于second值，我们只是递增i以转到列表中的下一个项目。我们也只是直接使用data[i]的值而不是尝试访问它的任何属性，因为它只是一个项目数组。

这会给出一个填充的选择框：

修改 从注释中可以看出，返回的Json没有被正确解析，并且根据上面的内容，您的索引和命名也不正确。假设您使用jquery.ajax()方法检索Json，它可能将返回的项目视为字符串。来自dataType参数的documentation（强调我的）：

  

您期望从服务器返回的数据类型。如果没有指定，jQuery将尝试根据响应的MIME类型推断它（XML MIME类型将产生XML，在1.4 JSON中将产生一个JavaScript对象，在1.4脚本中将执行脚本，并且任何东西else将以字符串形式返回）。

您可以将调用更改为dataType: 'json'，根据文档，jQuery会自动将其解析为JavaScript对象：

ajaxReq = $.ajax({
    url: '/home/something',
    dataType: 'json', //get jQuery to parse the response for us
    success: function (data) {
        //data is now a parsed JS object
        var html = "";
        var len = data.length;
        for (var i = 0; i < len; i++) {
            var first = [data[i]];
            var second = [data[++i]];

            html += '<option value=' + first + '>' + second + '</option>';
        }
        $('#SelectBox').html(html).show();
    }
});

如果你想手动解析json或者你正在使用不同的方法来检索结果，你可以通过添加

来自己解析json

data = JSON.parse(data);

行[{1}}

之前

Answer 3

var batch= document.getElementById('id');    
$(batch).append($("<option></option>").val(first ).html(second ));

注意:Id使用browser.ie(insepect element)。