javascript - jQuery不会在选择标签内附加附加选项标签

Question

我的 JS 代码有以下内容。

$(document).ready(function () {
    var newOptions = "{'East': 'first','West': 'second', 'North': 'third'}";
    var option = $('#type_form');

    option.empty(); 

    $.each(newOptions, function(key, value) {
        option.append($('<option></option>').attr('value', value).text(key));
    });
});

HTML如下：

<select id="type_form">
    <option value="first">First</option> 
    <option value="second">Second</option> 
</select>

chrome 中的 JS 控制台不会给我任何错误。所有选项标签都被删除，但它们不会被任何东西替换。

有任何想法吗？

Answer 1

newOptions应该是一个对象而不是一个字符串，

如果您将其作为字符串，则使用JSON.parse()将其解析为对象- 对于像 IE8 这样不支持原生 JSON 的浏览器，您必须添加像json2这样的库

$(document).ready(function () {
    var newOptions = {"East": "first","West": "second", "North": "third"};
    var option = $('#type_form');

    option.empty(); 

    $.each(newOptions, function(key, value) {
        option.append($('<option></option>').attr('value', value).text(key));
    });
});

Answer 2

您必须解析您的 JSON 字符串：

$.each(JSON.parse(newOptions), function(key, value) {

编辑：我的回答假设您的字符串来自其他地方。如果真的是字面量，最好直接写成字面量对象，如 Arun 所示。