使用jQuery将div格式条码作为属性赋值给select option时显示异常如何解决

问题原因 #

你遇到的显示变形问题核心是HTML字符串拼接时的引号冲突：你存储的条码div代码中包含大量style="xxx"格式的双引号，直接拼接进data-barcode="xxx"属性时，条码内容里的双引号会提前闭合data-barcode属性，破坏整个option的HTML结构，最终导致显示异常。移除data-barcode属性后没有了结构破坏，所以显示恢复正常。

解决方案 #

方案1：使用jQuery的data()方法赋值（最推荐） #

不需要手动拼接属性字符串，创建option元素后单独赋值data属性，jQuery会自动处理特殊字符转义，无需修改原有条码存储内容：

const $option = $('<option></option>')
  .val(products.id)
  .text(products.name)
  .data('barcode', products.barcode);
$('#item').append($option);

后续需要读取条码内容时，直接调用$(option).data('barcode')即可拿到原始的div代码。

方案2：对条码内容做HTML转义后拼接 #

如果必须使用字符串拼接的写法，先对条码内容的特殊字符做转义，避免引号冲突：

// 转义HTML特殊字符的工具方法
function htmlEscape(str) {
  return str.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
}

// 拼接时先转义条码内容
$('#item').append('<option value="'+products.id+'" data-barcode="'+htmlEscape(products.barcode)+'">'+products.name+'</option>');

后续使用条码内容时，做对应的HTML反转义即可拿到原始代码。

方案3：条码内容转Base64存储 #

如果不需要在属性中直接查看条码明文，可以将条码内容编码为Base64后存储，彻底避免特殊字符冲突：

// 存储时编码
const encodedBarcode = btoa(unescape(encodeURIComponent(products.barcode)));
$('#item').append('<option value="'+products.id+'" data-barcode="'+encodedBarcode+'">'+products.name+'</option>');

// 读取时解码
const rawBarcode = decodeURIComponent(escape(atob(encodedBarcode)));

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