Wie deaktivieren Sie die nicht ausgewählten Optionen für ein Mehrfachauswahlelement nicht ausgewählte Optionen? ⇐ CSS

[Guest]

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

Code: Select all

const tagsList = document.querySelector(".tags-list")
const tagActions = document.getElementById("tagActions")
const tagSelector = document.getElementById("tags")
const tagToggler = document.getElementById("tagSelectorToggler")
var selectedTags = new Set()

function filterTags(event) {
var query = event.target.value
var availableTags = Array.from(tagSelector.options)

availableTags.forEach(function (option) {
if (!option.text.toLowerCase().includes(query.toLowerCase())) {
option.classList.add("d-none")
} else {
option.classList.remove("d-none")
}
})
}

function toggleTagSelector(event) {
if (event.target.tagName !== "BUTTON" && event.target.tagName !== "SPAN") {
tagActions.classList.toggle("d-none")
tagToggler.classList.toggle("active")
}
}

function renderTags() {
tagsList.innerHTML =
[...selectedTags]
.sort()
.map(
(tag) =>
`[*]            >${tag}
×
`,
)
.join("") ||
`[*]Click and select one or more tags from the list`
for (const option of tagSelector.options) {
option.selected = selectedTags.has(option.textContent)
}
}

tagsList.addEventListener("click", function (event) {
if (event.target.tagName !== "BUTTON") return
const span = event.target.closest("LI").children[0]
selectedTags.delete(span.textContent)
renderTags()
})

tagSelector.addEventListener("change", function () {
selectedTags = new Set(
Array.from(tagSelector.options)
.filter((option) => option.selected)
.map((option) =>  option.textContent),
)
renderTags()
})< /code>
.tags-list {
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: 2px;
}
.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%;
}
.form-control:focus, .form-select:focus {
box-shadow: none;
}
/* Tags */
.toggler {
position: absolute;
right: 5px;
margin-top: 8px;
color: #777;
cursor: pointer;
}
.toggler.active {
transform: rotate(180deg);
}
.tag-select {
height: 200px;
}
.tag-select option {
padding: 3px 8px;
}< /code>
[*]



Tags


[i][/i]

[list]        class="form-control tags-list mb-1"
onclick="toggleTagSelector(event)"
>

Click and select one or more tags from the list

[/list]




Apple
Banana
Blackberry
Blueberry
Cherry
Cranberry
Grapes
Kiwi
Mango
Orange
Peach
Pear
Pineapple
Raspberry
Strawberry
Watermelon



< /code>
< /div>
< /div>
< /p>
Ich habe eine Möglichkeit entwickelt, über die Liste der verfügbaren Liste zu suchen (Filter) Tags, das ist das Element 

. Eine Suchfunktion ist unerlässlich, da viele Tags aus . Element und klicken Sie darauf, die zuvor ausgewählten Elemente werden abgewählt.>