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

时间:2016-04-07 18:05:23

标签: javascript jquery json html5

我有后端生成的以下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),我会得到 SyntaxError:JSON.parse:JSON数据的第1行第3列的预期属性名称或'}'

我理解这个错误可能有两个原因,信息已经被解析或者它是无效的json。

感谢任何帮助

1 个答案:

答案 0 :(得分:3)

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