如何用CSS和jQuery为下拉列表添加样式化分隔线？

原生<select>元素只允许<option>和<optgroup>作为子元素，你插入的<hr>属于无效内容，浏览器解析时会出现异常，导致样式无法生效、显示混乱。下面给两种可行的实现方案：

方案1：用<optgroup>模拟分隔线（原生select兼容方案） #

利用<optgroup>的可样式化特性，把它当作分隔线使用。不需要额外依赖，适合需要保留原生select交互的场景。

代码实现： #

var myList = $("#ddlProcedure");
myList.empty();
// 添加默认选项
myList.append('<option selected="selected" value="0">Select name</option>');

for (var i = 0; i < response.Data.length; i++) {
    // 添加选项
    myList.append($('<option></option>').val(response.Data[i].id).html(response.Data[i].name));
    // 添加用作分隔线的optgroup（最后一个选项后可以不加，避免多余分隔线）
    if (i !== response.Data.length - 1) {
        myList.append('<optgroup class="select-divider"></optgroup>');
    }
}

CSS样式： #

/* 隐藏optgroup的默认标签，设置分隔线样式 */
.select-divider {
    border-top: 1px solid #ccc;
    height: 0;
    padding: 0;
    margin: 4px 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
/* 移除optgroup的默认缩进并隐藏自动生成的空option */
.select-divider option {
    display: none;
}

方案2：自定义下拉组件（完全可控样式） #

如果需要更灵活的样式和交互，直接用HTML/CSS/JS模拟下拉列表，完全摆脱原生select的限制。

代码实现： #

<!-- 自定义下拉容器 -->
<div class="custom-select">
    <div class="select-trigger">Select name</div>
    <ul class="select-options">
        <!-- 选项和分隔线将通过JS动态生成 -->
    </ul>
</div>

var selectTrigger = $(".custom-select .select-trigger");
var selectOptions = $(".custom-select .select-options");

// 初始化选项
selectOptions.empty();
// 添加默认选项
selectOptions.append('<li class="option-item" data-value="0">Select name</li>');

for (var i = 0; i < response.Data.length; i++) {
    // 添加选项
    selectOptions.append(`<li class="option-item" data-value="${response.Data[i].id}">${response.Data[i].name}</li>`);
    // 添加分隔线（最后一个选项后不加）
    if (i !== response.Data.length - 1) {
        selectOptions.append('<li class="divider-item"></li>');
    }
}

// 下拉展开/收起逻辑
selectTrigger.click(function() {
    selectOptions.toggleClass("show");
});

// 点击选项触发选择
selectOptions.on("click", ".option-item", function() {
    var value = $(this).data("value");
    var text = $(this).text();
    selectTrigger.text(text);
    selectOptions.removeClass("show");
    // 可选：同步更新原生select的值（如果需要提交表单）
    // $("#ddlProcedure").val(value);
});

// 点击外部关闭下拉
$(document).click(function(e) {
    if (!$(e.target).closest(".custom-select").length) {
        selectOptions.removeClass("show");
    }
});

CSS样式： #

.custom-select {
    position: relative;
    width: 200px;
}

.select-trigger {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: white;
}

.select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    background: white;
    display: none;
    max-height: 200px;
    overflow-y: auto;
}

.select-options.show {
    display: block;
}

.option-item {
    padding: 8px 12px;
    cursor: pointer;
}

.option-item:hover {
    background-color: #f5f5f5;
}

.divider-item {
    height: 1px;
    background-color: #ccc;
    margin: 4px 0;
}

方案对比 #

• 方案1：基于原生select，兼容性好，无需额外交互逻辑，但样式自定义程度有限。
• 方案2：样式完全可控，可实现复杂交互，但需要自己处理下拉逻辑，适合对UI要求较高的场景。

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