Wie kann ich mit JavaScript eine multiple -aus -Option programmgesteuert wählen? ⇐ JavaScript

[Anonymous]

Ich arbeite am folgenden "Tags -Selektor" in JavaScript, ohne ein Plugin zu verwenden. -Code ">

Code: Select all

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

Die Methode Removetags (Ereignis) sollte nicht nur a entfernen Tag aus der Top -Tags -Liste, aber deaktivieren Sie die Option, die dem entfernten Tag aus dem Element
entspricht. Ich habe verwendet: < /p>

Code: Select all

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

Aus einem Grund, warum ich nicht herausgefunden habe, erscheint die Option, die dem entfernten Tag entspricht, ausgewählt .
Wie Kann ich das gewünschte Ergebnis erhalten?