У меня есть содержимое div (штрих-код) в моей базе данных, как показано ниже, и я хочу назначить его как атрибут для моей опции выбора. Когда я его назначаю, опция искажается. Как я могу это сделать? Я приложил изображение того, как это выглядит искаженным.

Когда я вынимаю атрибут data-barcode, он хорошо отображается

JS

$('#item').append('<option value="'+products.id+'"  data-barcode="'+products.barcode+'">'+products.name+'</option>');

enter image description here

DIV

<div style="font-size:0;position:relative;width:114px;height:30px;">
<div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0">&nbsp;</div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0">&nbsp;</div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:12px;top:0">&nbsp;</div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0">&nbsp;</div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:30px;top:0">&nbsp;</div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:38px;top:0">&nbsp;</div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0">&nbsp;</div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:50px;top:0">&nbsp;</div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:56px;top:0">&nbsp;</div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:66px;top:0">&nbsp;</div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:74px;top:0">&nbsp;</div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:84px;top:0">&nbsp;</div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:88px;top:0">&nbsp;</div>
<div style="background-color:black;width:6px;height:30px;position:absolute;left:98px;top:0">&nbsp;</div>
<div style="background-color:black;width:2px;height:30px;position:absolute;left:106px;top:0">&nbsp;</div>
<div style="background-color:black;width:4px;height:30px;position:absolute;left:110px;top:0">&nbsp;</div>
</div>
0
RoboPHP 10 Окт 2021 в 13:11

2 ответа

Лучший ответ

Вам нужно кодировать и экранировать HTML-теги

$('#item').append('<option value="'+products.id+'"  data-barcode="'+encodeURIComponent(products.barcode)+'">'+products.name+'</option>');

// get data-barcode and decode
let barcode = decodeURIComponent($(el).attr('data-barcode'));
0
emptyhua 10 Окт 2021 в 10:23

Как кодировать с помощью base64:

products = {
  id: '12345',
  barcode: '<div style="font-size:0;position:relative;width:114px;height:30px;"><div style="background-color:black;width:4px;height:30px;position:absolute;left:0px;top:0">&nbsp;</div><div style="background-color:black;width:2px;height:30px;position:absolute;left:6px;top:0">&nbsp;</div><div style="background-color:black;width:6px;height:30px;position:absolute;left:12px;top:0">&nbsp;</div><div style="background-color:black;width:4px;height:30px;position:absolute;left:22px;top:0">&nbsp;</div><div style="background-color:black;width:2px;height:30px;position:absolute;left:30px;top:0">&nbsp;</div><div style="background-color:black;width:2px;height:30px;position:absolute;left:38px;top:0">&nbsp;</div><div style="background-color:black;width:2px;height:30px;position:absolute;left:44px;top:0">&nbsp;</div><div style="background-color:black;width:2px;height:30px;position:absolute;left:50px;top:0">&nbsp;</div><div style="background-color:black;width:4px;height:30px;position:absolute;left:56px;top:0">&nbsp;</div><div style="background-color:black;width:4px;height:30px;position:absolute;left:66px;top:0">&nbsp;</div><div style="background-color:black;width:6px;height:30px;position:absolute;left:74px;top:0">&nbsp;</div><div style="background-color:black;width:2px;height:30px;position:absolute;left:84px;top:0">&nbsp;</div><div style="background-color:black;width:4px;height:30px;position:absolute;left:88px;top:0">&nbsp;</div><div style="background-color:black;width:6px;height:30px;position:absolute;left:98px;top:0">&nbsp;</div><div style="background-color:black;width:2px;height:30px;position:absolute;left:106px;top:0">&nbsp;</div><div style="background-color:black;width:4px;height:30px;position:absolute;left:110px;top:0">&nbsp;</div></div>',
  name: 'phone'
}
$('#item').append('<option value="'+products.id+'"  data-barcode="'+window.btoa(products.barcode)+'">'+products.name+'</option>');
console.log(window.atob($('#item > option[value="'+products.id+'"]').data('barcode')));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<select id="item"></select>
0
RatajS 10 Окт 2021 в 10:25