javascript - jquery数据不解析值html5数据自定义属性

标签 javascript jquery json html

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

感谢任何帮助

最佳答案

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 .

关于javascript - jquery数据不解析值html5数据自定义属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36483953/

相关文章:

jquery - 如何删除 jQuery UI 可拖动恢复时的动画?

c# - ASP.NET MVC 5 - JSON - (动态?)模型绑定(bind) - REST 服务 - Webhooks - Chargebee

javascript - 解析嵌套 json 的语法

javascript - 使用 momentjs 获取以毫秒为单位的时间跨度

javascript - 如何读取 csv 坐标并用 javascript 绘制它们?

javascript - i18next 显示键而不是值

jQuery 查找下一个表

javascript - 如何在函数后编码 '(' 时关闭 VS Code 上的 Intellisense 自动完成

javascript - 使用 jQuery forEach 查找发生原始点击的 <p>

javascript - 使用 jQuery 转换 JSON