Question

我知道之前已经问过这个问题，我已经阅读了其他帖子，但无法让它发挥作用。

我正在尝试使用JSON数据填充下拉菜单，但我遇到了一些问题，我的html页面上显示下拉列表，但下拉列表中没有任何内容，甚至没有“请选择”。下面是我的代码，你看到它有什么问题。

HTML

<select id="dropDown">
    </select>

的JavaScript

$(document).ready(function () {
    $.ajax({
        url: 'http://localhost/api/Dynamic?database=',
        dataType: 'Json',
        success: function (results) {
            var $el = $("#dropDown");
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
        }
    });
});

JSON

["Item1","Item2","Item3","Item4"]

Answer 1

您是否在jtml head标记中加入了jquery 还请检查你的ajax是否返回json数据
我做了一个小提琴，它的工作正常我

$(document).ready(function() {
 var $el = $("#dropDown");
var results = ["Item1","Item2","Item3","Item4"];
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
});

这是工作jsfiddle
https://jsfiddle.net/o5ju4kja/

Answer 2

var results = ["Item1","Item2","Item3","Item4"];

$(document).ready(function () {
            var $el = $("#dropDown");
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
    </select>

如您所见，jquery代码有效。问题必须在你的ajax请求中没有响应所需的json。

Answer 3

以下代码段工作正常，请验证以下几点：

验证请求是否正常，并且您收到了正确答案。
确认添加了jQuery - 可能缺少
确认控制台中没有错误

＆＃13;

var results = ["Item1","Item2","Item3","Item4"];

var $el = $("#dropDown");
$el.empty(); // remove old options
$el.append($("<option></option>")
   .attr("value", '').text('Please Select'));
$.each(results, function (index, value) {
$el.append($("<option></option>")
   .attr("value", value).text(value));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">

＆＃13;

Answer 4

您的 JSON 是否可能不是很好的编码。尝试在 Ajax 请求中添加contentType格式：

$(document).ready(function () {
    $.ajax({
        url: 'http://localhost/api/Dynamic?database=',
        dataType: 'Json',
        contentType:"application/json; charset=ISO-8859-1",
        cache:false,
        success: function (results) {
            var $el = $("#dropDown");
            $el.empty(); // remove old options
            $el.append($("<option></option>")
                    .attr("value", '').text('Please Select'));
            $.each(results, function (index, value) {
                $el.append($("<option></option>")
                        .attr("value", value).text(value));
            });
        }
    });
});

JQuery：使用JSON填充HTML下拉菜单

4 个答案: