JavaScript如何填充选项选择？

问：

所以我在PHP中使用Nette框架来创建basci博客网站，用户可以选择创建帖子并给它标签，但是我不知道如何正确地做到这一点。

我想要实现的目标： 我有 3 个选项，用户可以从这些标签中进行选择：NSFW、新闻、健身、技术、食品、时尚等。当用户选择标签时，我希望从其他选择中删除此标签，以便标签不会重复，但当用户更改标签时，我希望可以再次选择此标签。

问题：用户可以选择标签，标签被禁用，但有时所选标签没有被禁用，而以前的标签仍然被禁用。

这是我的代码：

{block content}

<div class="m-auto w-full flex flex-col items-center justify-center">
    <div class="w-full md:w-1/2 mt-2">
        <form class="w-full bg-white rounded-lg shadow-md" enctype="multipart/form-data">
            <h2 class="bg-gray-900 text-white font-bold text-xl p-4 rounded-tl rounded-tr">Create new post</h2>

            <div class="mb-6 p-4">
                <label for="content" class="block text-gray-700 text-sm font-bold mb-2">Content</label>
                <textarea id="content" name="content" class="border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter content" rows="5"></textarea>
            </div>
            <div class="mb-6 p-4">
                <label for="image" class="block text-gray-700 text-sm font-bold mb-2">Upload Image</label>
                <label for="image" class="relative w-full h-12 border-2 border-blue-300 border-dashed rounded cursor-pointer hover:border-gray-900 flex items-center justify-center">
                    <span id="file-chosen" class="text-blue-500 flex flex-row">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        Choose a file
                    </span>
                </label>
                <input type="file" id="image" name="image" accept="image/*" class="hidden" onchange="displayImage(event)">
                <img id="image-preview" class="mt-4 m-auto border border-gray-300 object-contain" style="max-width: 100%; max-height: 200px; display: none;">
            </div>

            <div class="mb-4 p-4 border-t border-gray-300">
                <label for="tags" class="block text-gray-700 text-sm font-bold mb-2">Tags (up to 3)</label>
                <div class="flex">
                    <select id="tagSelect1" name="tags1" class="flex-1 border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2 mr-2"
                            onchange="onTagChange(1,2,3)">
                        <option value="" disabled selected>Select a tag</option>
                        {foreach $tags as $tag}
                            <option value="{$tag->id}">{$tag->name}</option>
                        {/foreach}
                    </select>
                    <select id="tagSelect2" name="tags2" class="flex-1 border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2 mr-2"
                            onchange="onTagChange(2,1,3)">
                        <option value="" disabled selected>Select a tag</option>
                        {foreach $tags as $tag}
                            <option value="{$tag->id}">{$tag->name}</option>
                        {/foreach}
                    </select>
                    <select id="tagSelect3" name="tags3" class="flex-1 border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
                            onchange="onTagChange(3,2,1)">
                        <option value="" disabled selected>Select a tag</option>
                        {foreach $tags as $tag}
                            <option value="{$tag->id}">{$tag->name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="flex items-center justify-end p-4">
                <button class="text-gray-900 p-3 hover:bg-gray-700 border border-gray-900 hover:text-white rounded font-bold" type="submit">
                    Create Post
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    let allTags = document.getElementById('tagSelect1').options;
    let availableTags = [];

    for (let i = 0; i < allTags.length; i++) {
        availableTags.push(allTags[i].value);
    }

    console.log(availableTags);
    let selectedTags = [];

    function updateOptions() {
        const selectElements = document.querySelectorAll('[id^="tagSelect"]');

        selectElements.forEach((selectElement) => {
            const options = selectElement.options;
            for (let i = options.length - 1; i >= 0; i--) {
                if (!selectedTags.includes(options[i].value)) {
                    options[i].disabled = false;
                }
            }
        });
    }

    function onTagChange(currentlySelected, select2, select3) {
        const selectedTagElement = document.getElementById('tagSelect' + currentlySelected);
        const selectedTag = selectedTagElement.value;
        const selectElements = [document.getElementById('tagSelect' + select2), document.getElementById('tagSelect' + select3)];

        // Update available tags
        selectedTags.push(selectedTag);
        if (selectedTags.length > 3) {
            const removedTag = selectedTags.shift();
            availableTags.push(removedTag);
        }

        // Disable selected tags in other selects
        selectElements.forEach((selectElement) => {
            const options = selectElement.options;
            for (let i = 0; i < options.length; i++) {
                if (options[i].value !== selectedTag && !selectedTags.includes(options[i].value)) {
                    options[i].disabled = true;
                }
            }
        });

        // Update available tags
        availableTags = availableTags.filter(tag => tag !== selectedTag);

        // Update options based on available tags
        selectElements.forEach((selectElement) => {
            const options = selectElement.options;
            for (let i = options.length - 1; i >= 0; i--) {
                if (!availableTags.includes(options[i].value)) {
                    options[i].disabled = true;
                }
            }
        });

        // Update options based on selected tags
        updateOptions();

        console.log("Selected Tags:");
        selectedTags.forEach((tag, index) => {
            console.log("Index: " + index + ", Value: " + tag);
        });
    }

    function addTagBackToOptions(tag, select, options) {
        for (let i = 0; i < tagsList.length; i++) {
            if (tagsList[i].value === tag && select !== 'tagSelect1') {
                const newOption = new Option(tag, tag);
                document.getElementById('tagSelect1').add(newOption);
            }
        }
    }


    function displayImage(event) {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function(e) {
            const imagePreview = document.getElementById('image-preview');
            imagePreview.src = e.target.result;
            imagePreview.style.display = 'block';
        }

        reader.readAsDataURL(file);
        const fileName = document.getElementById('file-chosen');
        fileName.textContent = file.name;
    }
</script>