jquery数据未解析值html5数据自定义属性

Question

我有以下由后端生成的 HTML 标签

<select name="brand" class="form-control">
    <option value="1" data-info="[{id=1, name=detail#1}, {id=2, name=detail#2}, {id=3, name=detail#3}]">brand#1</option>
    <option value="2" data-info="[{id=3, name=detail#3}, {id=4, name=detail#4}, {id=5, name=detail#5}]">brand#2</option>
</select>

我试图在用户更改选项时访问数据信息值，所以我试试这个代码

$('#brand').on('change', function(){
    var optionSelected = $("option:selected", this);
    var info = optionSelected.data("info")

    console.log(typeof info)
})

但是当我得到 typeof 信息时，我得到一个字符串，我需要并反对。

如果我尝试 JSON.parse(info)，我会在 JSON 数据的第 1 行第 3 列得到 SyntaxError: JSON.parse: expected property name or '}'

我了解此错误可能有两个原因，信息已被解析或它不是有效的 json。

感谢任何帮助

Answer 1

jQuery 的 JSON 处理程序只翻译有效的 JSON。您在其中的 JSON 无效。具体来说，它缺少必要的引号，并且您使用的是= 而不是:。它应该是这样的：

<option value="1" data-info='[{"id":1, "name":"detail#1"}, {"id":2, "name":"detail#2"}, {"id":3, "name":"detail#3"}]'>brand#1</option>

供参考，the JSON spec。