兼容无JS环境的自定义Select组件实现方案合理性咨询

云上老周

2026-8-16

问题

我想给select选项做样式定制，同时确保JS禁用时控件完全正常工作：

未启用JS时，使用原生<SELECT>控件；
启用JS时，用JS生成的<DIV>替代原生控件。
我正在开发支持无JS环境的网站，请问这个方案是否合理？有没有更优的实现方式？

现有代码

HTML代码

<h3>Filtre</h3>
<section class="section" id="section-filters">
    <div class="add-item__form-data">
        <div class="add-item__input-wrapper">
            <select name="filter_brand" placeholder="Značka" class="add-item__select<?= highlightSelectIfEmpty('filter_error', 'filter_brand') ?>" required>
                <option value="" disabled selected class="add-item__select-main">Značka</option>
                <option value="Samsung" <?= markSelectedAfterResend('filter_brand', 'Samsung') ?>>Samsung</option>
                <option value="Nokia" <?= markSelectedAfterResend('filter_brand', 'Nokia') ?>>Nokia</option>
            </select>
        </div>
        <div class="add-item__input-wrapper">
            <select name="filter_model" placeholder="Model" class="add-item__select<?= highlightSelectIfEmpty('filter_error', 'filter_model') ?>" required>
                <option value="" disabled selected class="add-item__select-main">Model</option>
                <option value="Samsung S20" <?= markSelectedAfterResend('filter_model', 'Samsung S20') ?>>Samsung S20</option>
                <option value="Samsung S30" <?= markSelectedAfterResend('filter_model', 'Samsung S30') ?>>Samsung S30</option>
            </select>
        </div>
        <div class="add-item__input-wrapper">
            <select name="filter_os" placeholder="Operačný systém" class="add-item__select<?= highlightSelectIfEmpty('filter_error', 'filter_os') ?>" required>
                <option value="" disabled selected class="add-item__select-main">Operačný systém</option>
                <option value="Android" <?= markSelectedAfterResend('filter_os', 'Android') ?>>Android</option>
                <option value="iOS" <?= markSelectedAfterResend('filter_os', 'iOS') ?>>iOS</option>
            </select>
        </div>
        <div class="add-item__input-wrapper">
            <select name="filter_memory" placeholder="Pamäť" class="add-item__select<?= highlightSelectIfEmpty('filter_error', 'filter_memory') ?>" required>
                <option value="" disabled selected class="add-item__select-main">Pamäť</option>
                <option value="20GB" <?= markSelectedAfterResend('filter_memory', '20GB') ?>>20GB</option>
                <option value="60GB" <?= markSelectedAfterResend('filter_memory', '60GB') ?>>60GB</option>
            </select>
        </div>
        <div class="add-item__input-wrapper">
            <select name="filter_color" placeholder="Farba" class="add-item__select<?= highlightSelectIfEmpty('filter_error', 'filter_color', 'yes') ?>" required>
                <option value="" disabled selected class="add-item__select-main">Farba</option>
                <option value="Biela" <?= markSelectedAfterResend('filter_color', 'Biela') ?>>Biela</option>
                <option value="Čierna" <?= markSelectedAfterResend('filter_color', 'Čierna') ?>>Čierna</option>
            </select>
        </div>
    </div>
</section>

JavaScript代码

/* SELECT BOX */

var select = $('.add-item__select').hide(); // Hide original select options

// Replace each select by div
select.each(function(){
    var selectVal = $(this).find('.add-item__select-main').text();
        newDropdownDiv = $('<div class="add-item__select">' + selectVal + '<i class="arrow down"></i></div>')
            .insertAfter($(this))
            .css({paddingLeft: '0.3em', cursor: 'pointer'});
});


// Add new div with options after click on select
$('.add-item__select').on('click', function() {

    var currentNewDropdown = $(this).next(),
        currentSelect = $(this).prev();

    // Check if new div dropdown already exists
    if (!currentNewDropdown.hasClass('add-item__custom-select-box')) {
        var newDropdown = $('<div/>') // create new div element
            .addClass('add-item__custom-select-box') // with class NewDropdown
            .insertAfter($(this)); // and append it to page
    }

    // If select was already clicked on, then do not create new dropdown list
    if (!currentSelect.hasClass('counted')) {

        // Check each option value and attach it to new dropdown as div
        currentSelect.find('option').each(function(index, element){
            var option = $(this); // this is the option from the original select
                currentNewDropdown = $(this).parent().next();

            // If option is disabled do not append it to new dropdown list
            if (!option.prop('disabled')) {
                var newOption = $('<div/>') // create new div element
                    .addClass('add-item__custom-select-box-items') // with class NewDropdown-item
                    .html(option.html()) // copy content from original option
                    .data('value', option.val()) // copy value from original option
                    .appendTo(newDropdown); // append it to the new dropdown
            }
        })
        // Show new dropdown options after click on select
        currentNewDropdown = $(this).next();
        currentNewDropdown.show();
        currentSelect.addClass('counted');

    } else {
        // Remove new dropdown list
        currentNewDropdown.remove();
        currentSelect.removeClass('counted');
    }

});

// Add value of clicked element to original option
$('.add-item__input-wrapper').on('mousedown','.add-item__custom-select-box-items', function() {

    var clickedOption = $(this),
        clickedOptionVal = clickedOption.text(), // set original select's value
        select = $(this).parent().prev(),
        newDropdown = $(this).parent();

    select.val(clickedOptionVal);
    newDropdown.remove();
});

// Hide select box after focus out
select.on('focusout', function() {
    var newDropdown = $(this).next(),
        select = $(this);
    newDropdown.remove();
    select.removeClass('counted');
});

方案合理性分析

你的核心思路完全符合渐进增强的原则：先保证无JS环境下原生select的基础功能（表单提交、验证、交互）正常，再通过JS增强视觉样式和交互体验，这个方向非常合理，也是适配无JS场景的标准做法。

但现有实现存在不少细节问题：

可访问性缺失：原生select支持键盘导航（Tab聚焦、上下箭头选选项、回车确认），自定义DIV完全没有模拟这些功能，键盘用户无法正常使用；
状态同步漏洞：如果原生select的值被外部修改（比如表单重置、JS动态更新），自定义DIV的显示内容不会同步；页面加载时如果select有预选中值（比如表单回显），自定义DIV只会显示默认提示文本，而非选中值；
事件逻辑缺陷：点击自定义选项时可能触发原生select的focusout事件，导致下拉菜单意外关闭；自定义控件和原生select使用相同类名add-item__select，容易引发事件绑定冲突；
性能浪费：每次点击都重新创建和删除下拉选项，重复DOM操作会增加性能开销。

优化建议

1. 可访问性优化

给自定义触发容器添加tabindex="0"，支持键盘聚焦；
监听键盘事件：按下Enter或Space时展开/收起下拉，按下Up/Down箭头切换选项，按下Esc关闭下拉；
添加ARIA属性：比如role="button"、aria-expanded（标记下拉是否展开）、aria-controls（关联下拉容器ID），让屏幕阅读器能识别控件功能。

2. 完善状态同步

初始化自定义控件时，获取原生select的当前选中值（而非固定取disabled的提示选项），设置自定义触发容器的文本；
监听原生select的change事件，当值变化时同步更新自定义控件的显示内容；
处理表单重置场景：监听表单的reset事件，重置自定义控件的显示状态。

3. 优化事件与DOM操作

给自定义触发容器添加独特类名（比如add-item__custom-select-trigger），避免和原生select的类名冲突；
提前一次性生成所有下拉选项，隐藏在DOM中，点击时只切换显示/隐藏状态，避免重复创建删除；
用document点击事件判断外部点击：当点击自定义控件以外的区域时，关闭下拉菜单，替代现有不可靠的focusout逻辑。

4. 样式控制优化

不要用JS直接hide()原生select，而是通过给<body>添加js-enabled类，用CSS控制隐藏：
```
.js-enabled .add-item__select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}
```
这种方式可以避免FOUC（无样式内容闪烁），同时保留原生select的表单提交功能。

5. 表单验证适配

确保自定义控件的交互能触发原生select的验证逻辑，比如点击选项后触发原生select的change事件，让浏览器的原生验证正常工作；
同步错误状态：当原生select因验证失败被添加错误类时，自定义控件也要同步添加对应的样式类。

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

兼容无JS环境的自定义Select组件实现方案合理性咨询

HTML代码 #

JavaScript代码 #

1. 可访问性优化 #

2. 完善状态同步 #

3. 优化事件与DOM操作 #

4. 样式控制优化 #

5. 表单验证适配 #