Как я могу отказаться от программного решения с множественной опцией выбора с помощью JavaScript? ⇐ Html

[Anonymous]

Я работаю над «Селектором тегов» ниже в JavaScript, без использования какого -либо плагина. < /p>

Код: Выделить всё

var results = []

function renderTags() {
var tagsContainer = document.querySelector(".tags-list")
var tags = ""
results = [...new Set(results)]
results = results.sort()
results.forEach(function(tag) {
var tag = `[*]        >${tag}
×
`
tags = tags + tag
tagsContainer.innerHTML = tags
})
}

function selectTags(event) {
var select = event.target
var options = select && select.options
for (var i = 0; i < options.length; i++) {
if (options[i].selected) {
results.push(options[i].text)
} else {
results = results.filter((tag) => tag !== options[i].text)
}
}
renderTags()
}

function removeTags(event) {
var elementToRemove = null
var clickedTag = event.target
var selectBox = clickedTag.closest("div").querySelector("select")
var selectOptions = Array.from(selectBox.options)
var tagText = clickedTag.parentNode.querySelector(".value").textContent
results = results.filter((tag) => tag != tagText)
if (!results.includes(tagText)) {
elementToDeselect = selectOptions.find((o) => o.text == tagText)
elementToDeselect.setAttribute('selected', false)
}
renderTags()
}

const tagSelector = document.getElementById("fruits")
const tagsList = document.querySelector(".tags-list")

tagsList.addEventListener("click", function(event) {
if (event.target.parentNode.tagName === "LI") {
removeTags(event)
}
})

tagSelector.addEventListener("change", selectTags)< /code>
.tags-list {
margin: 0 0 4px 0;
min-height: 40px;
list-style-type: none;
}

.tags-list .tag {
line-height: 1;
white-space: nowrap;
background: #f2f2f2;
border: 1px solid #e6e3e3;
display: inline-flex;
align-items: center;
border-radius: 999px;
font-size: 13px;
padding: 3px 8px;
margin-bottom: 1px;
}

.tags-list .tag button {
background: #ff9292;
color: #720000;
border: none;
width: 18px;
height: 18px;
font-size: 12px;
display: inline-flex;
justify-content: center;
align-items: center;
margin-left: 6px;
border-radius: 50%;
}

select[multiple] option {
padding: 4px 8px;
}< /code>




Fruits
[list]
Select one or more tags from the list below
[/list]

Apple
Banana
Blackberry
Blueberry
Watermelon

Метод RemoveTags (Event) должен не только удалять Теги из списка Top Tags, но Deselect опцию, соответствующую удалению тега из элемента .
Для этой цели, У меня есть Используется: < /p>

Код: Выделить всё

if (!results.includes(tagText)) {
elementToDeselect = selectOptions.find((o) => o.text == tagText)
elementToDeselect.setAttribute('selected', false)
}

По какой -то причине я не смог выяснить, опция, соответствующая удалению тега , отображается .
Как Могу ли я получить желаемый результат?

Подробнее здесь: https://stackoverflow.com/questions/794 ... javascript