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

jquery data is not parsing value html5 data custom attribute

本文关键字：数据 html5 自定义属性 jquery      更新时间：2024-03-06

我有以下由后端生成的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)
})

但当我得到类型的信息时，我会得到一个字符串，我需要和对象。

如果我尝试JSON.parse（info），我会得到SyntaxError:JSON.parce:JSON数据的第1行第3列处的预期属性名或"｝"

我知道这个错误可能有两个原因：信息已经被解析，或者它不是有效的json。

如有任何帮助，我们将不胜感激。

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>

作为参考，JSON规范

相关文章：