如何将 JSON 数据附加到 ajax javascript 中的选择标记中答案

【问题标题】：How to append JSON data into select tag in ajax javascript如何将 JSON 数据附加到 ajax javascript 中的选择标记中
【发布时间】：2016-07-10 13:43:03
【问题描述】：

我正在开发一个 ASP.Net MVC5 项目，并且我正在使用 ajax 在我的项目中调用一个 web 服务。到目前为止一切正常，最后城市名称可以附加到select 标签中，但下面的代码不起作用：

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        function f1() {
            var token="";
            $.ajax({
                data: { webservice_username: 'webservice_usernam', password: 'password' },
                url: 'http://www.travelinsure.ir/api/v1.1/authenticate',
                type: 'POST',
                dataType: 'json',
                success: function (data) {
                    $.each(data, function (idx, result) {
                        token = result;
                        f2(result);
                    })
                },
                error: function (x, y, z) {
                    alert(x.responseText);
                    alert(z);
                }
            });
        }
        function f2(token) {
            // alert('New: '+token);
            $.ajax({
                data: { token: token },
                url: 'http://www.travelinsure.ir/api/v1.1/getcitylist?token=',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    results = JSON.stringify(data);
                    // a = JSON.parse(data);
                    alert(results);
                    a = $.parseJSON(data);
                    alert(a);
                    $.each(data, function (idx, r) {
                        $("#sel").append("<option value='" + r.city_id + "'>'" + r.city_name + "'</option>");
                        alert(result.city_name);
                    })
                },
                error: function (x, y, z) {
                    alert(x.responseText);
                    alert(z);
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <input type="submit" name="name" value="Click!!!" onclick="f1()" />
    </div>
    <div id="mydiv">
        <select id="sel">
            <option>لیست شهرهای ایران</option>
        </select>
    </div>
</body>
</html>

【问题讨论】：

欢迎来到 Stack Overflow！您能否详细说明您的代码如何“不起作用”？你期待什么，实际发生了什么？如果您遇到异常/错误，请发布它发生的行和异常/错误详细信息。请edit这些详细信息，否则我们可能无法提供帮助。

标签： c# asp.net rest asp.net-web-api

【解决方案1】：

看起来您以错误的方式附加选项。

这样做：

$.each(data, function(key, value) {   
     $('#sel').append($("<option></option>").attr("value",item.city_id).text(item.city_name)); 
});

您也可以像这样添加一个新选项：

$.each(data, function (key, item) {
    $("#sel").get(0).options[$("#sel").get(0).options.length] = new Option(item.city_name, item.city_id);
});

【讨论】：