Choices
Choices copied to clipboard
Published
20 hours ago •
Choices-js
Choices-js
How to add html special chars via option tag and allowHTML=false
Describe the bug If the html option tag contains a value with e.g. an "&" char or the html special char "&" its always rendered as "&".
Expected behavior If the html option tag contains one of the following html special chars (& , < , > , ") they should get rendered properly even if allowHTML is false.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/styles/base.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/styles/choices.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>
</head>
<body>
<div class="container">
<div class="section">
<label>Choices with allowHTML = false</label>
<select name="test1" id="test1">
<option value="1">Option A&1</option>
<option value="1">Option A&1</option>
<option value="2">Option B < X</option>
<option value="2">Option B < X</option>
</select>
<label>Choices with allowHTML = true</label>
<select name="test2" id="test2">
<option value="1">Option A&1</option>
<option value="1">Option A&1</option>
<option value="2">Option B < X</option>
<option value="2">Option B < X</option>
</select>
</div>
</div>
<script type="text/javascript">
(function() {
const test1Select = document.getElementById('test1');
const choices1 = new Choices(test1Select, {allowHTML: false});
const test2Select = document.getElementById('test2', {allowHTML: true});
const choices2 = new Choices(test2Select);
})();
</script>
</body>
</html>
