如何为下拉选择框中的每个选项添加删除按钮

原生HTML的<select>标签里的<option>无法直接嵌入按钮元素，所以我们需要用自定义的下拉容器来模拟这个功能，以下是具体实现步骤：

1. 修改HTML结构 #

替换原来的<select>为自定义下拉容器，包含触发按钮和选项列表：

<form id="ReportIDSection1" class="col-lg-6 section1">
    <div class="form-inline">
        <div class="input-group mb-3 col-lg-11">
            <div class="input-group-append">
                <span class="input-group-text lclient">clients info:</span>
            </div>
            <!-- 自定义下拉容器 -->
            <div class="custom-dropdown">
                <!-- 下拉触发按钮，显示选中值 -->
                <button type="button" class="form-control dropdown-toggle" id="ReportIDClientTrigger">
                    *** לקוח חדש ***
                </button>
                <!-- 选项列表，默认隐藏 -->
                <div class="dropdown-options" id="ReportIDClientOptions"></div>
            </div>
        </div>
    </div>
</form>

2. 添加基础CSS样式 #

让自定义下拉看起来和原生select一致：

.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-toggle {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ced4da;
    border-top: none;
    background: white;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 100;
}

.dropdown-option {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.dropdown-option:hover {
    background-color: #f8f9fa;
}

.delete-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
}

3. 修改JavaScript逻辑 #

更新ShowClients函数来生成带删除按钮的选项，同时添加下拉显示隐藏、选中、删除的逻辑：

// 全局变量存储选中的客户端名称
let selectedClient = "*** לקוח חדש ***";

function ShowClients() {
    const optionsContainer = document.getElementById("ReportIDClientOptions");
    const triggerBtn = document.getElementById("ReportIDClientTrigger");
    // 清空原有选项
    optionsContainer.innerHTML = "";

    // 添加"新客户"选项（不可删除）
    addOption("*** לקוח חדש ***", false);

    // 添加现有客户选项（可删除）
    for (let i = 0; i < Clients.length; i++) {
        addOption(Clients[i].Name, true);
    }

    // 默认选中第一个客户（如果有）
    if (Clients.length > 0) {
        selectedClient = Clients[0].Name;
        triggerBtn.textContent = selectedClient;
    }

    // 绑定下拉显示隐藏事件
    triggerBtn.addEventListener("click", function() {
        optionsContainer.style.display = optionsContainer.style.display === "block" ? "none" : "block";
    });

    // 点击页面其他区域关闭下拉
    document.addEventListener("click", function(e) {
        if (!e.target.closest(".custom-dropdown")) {
            optionsContainer.style.display = "none";
        }
    });

    // 添加选项的函数
    function addOption(text, canDelete) {
        const optionDiv = document.createElement("div");
        optionDiv.className = "dropdown-option";
        optionDiv.textContent = text;

        // 如果可删除，添加删除按钮
        if (canDelete) {
            const deleteBtn = document.createElement("button");
            deleteBtn.className = "delete-btn";
            deleteBtn.textContent = "×";
            // 删除按钮点击事件
            deleteBtn.addEventListener("click", function(e) {
                e.stopPropagation(); // 阻止触发选项选中事件
                // 从Clients数组中移除该客户
                Clients = Clients.filter(client => client.Name !== text);
                // 重新渲染选项
                ShowClients();
            });
            optionDiv.appendChild(deleteBtn);
        }

        // 选项选中事件
        optionDiv.addEventListener("click", function() {
            selectedClient = text;
            triggerBtn.textContent = text;
            optionsContainer.style.display = "none";
            // 这里可以添加原来ShowClients函数中需要的后续逻辑
        });

        optionsContainer.appendChild(optionDiv);
    }
}

关键说明 #

• 原生<select>无法实现选项内带按钮的需求，用div和button模拟下拉组件是最直接的方案
• 代码中通过addOption函数统一生成选项，区分可删除和不可删除的选项
• 删除按钮点击时会从Clients数组中移除对应项，然后重新渲染整个选项列表
• 添加了点击外部关闭下拉的交互，更贴近原生下拉的体验

内容的提问来源于stack exchange，提问作者Nikita Gelfman