如何用jQuery为option标签构建合法JSON格式的value属性

你的问题出在手动拼接JSON字符串时，没有给字符串类型的字段值（比如colorCode的#FFFFFF）添加双引号，若需要把colorId转为字符串类型也未做处理，导致生成的JSON格式不合法。

最稳妥的方法是放弃手动拼接JSON，直接用原生的JSON.stringify()方法生成标准JSON字符串——它会自动处理所有字段的引号和格式问题，彻底避免手动拼接的失误。

修改后的完整函数代码如下：

function colorInfo(data) {
    console.log("Color Info");
    console.log(data);
    let colorData = JSON.parse(data);

    console.log(colorData);

    $.each(colorData, function (key, value) {
        $("#lineupColors").append(
            $("<option></option>")
               .attr("value", JSON.stringify({
                   colorId: value.colorId.toString(), // 需字符串类型就加toString()，要保留数字可直接写value.colorId
                   colorCode: value.colorCode
               }))
              .text(value.colorName)
        );
    });
}

关键说明： #

• JSON.stringify()会自动将JS对象序列化为合法的JSON字符串，所有字符串类型的字段值都会被正确加上双引号，无需手动拼接。
• 调整后生成的option的value值就是标准格式的JSON，例如{"colorId":"1","colorCode":"#FFFFFF"}，完全符合需求。
• 手动拼接JSON极易出现引号遗漏、特殊字符未转义等问题，用JSON.stringify()能从根源上规避这类错误。

内容的提问来源于stack exchange，提问作者Tan