点击按钮展开select下拉选项的实现方案求助

问题描述：
希望点击按钮时展示select的下拉选项，先后尝试了jQuery的focus()方法和trigger('click')方法，但两种方式均未生效，请问该如何实现？

尝试代码1：

<button id="showSelect">show</button>
<select id="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script>
    $(document).ready(function() {
        $('#showSelect').on('click', () => {
            $('#mySelect').focus()
        })
    });
</script>

尝试代码2：

<button id="showSelect">show</button>
<select id="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script>
    $(document).ready(function() {
        $('#showSelect').on('click', () => {
            $('#mySelect').trigger('click')
        })
    });
</script>

原因分析 #

浏览器出于安全和交互规范限制，不允许脚本直接触发原生<select>的下拉展开动作——focus()仅能让select获得焦点，无法弹出选项；trigger('click')也无法模拟用户真实点击select下拉按钮的行为。

可行实现方案 #

方案1：修改select的size属性模拟下拉

利用select的size属性，点击按钮时将其设置为选项总数，失去焦点或选中选项后恢复为1，以此模拟下拉展开效果：

<button id="showSelect">show</button>
<select id="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        const $select = $('#mySelect');
        const optionCount = $select.find('option').length;
        
        $('#showSelect').on('click', (e) => {
            e.stopPropagation();
            $select.attr('size', optionCount).focus();
        });
        
        $(document).on('click', () => {
            $select.attr('size', 1);
        });
        
        $select.on('change', () => {
            $select.attr('size', 1);
        });
    });
</script>

方案2：自定义下拉组件（推荐）

如果需要更灵活的样式和交互，完全自定义下拉组件是最佳选择，不受原生select的限制：

<button id="showSelect">show</button>
<div class="custom-select">
    <div class="select-trigger" id="selectTrigger">请选择</div>
    <ul class="select-options" id="selectOptions">
        <li data-value="1">1</li>
        <li data-value="2">2</li>
        <li data-value="3">3</li>
    </ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    .custom-select {
        position: relative;
        width: 100px;
        margin-top: 10px;
    }
    .select-trigger {
        padding: 4px 8px;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    .select-options {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        border: 1px solid #ccc;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
        background: white;
    }
    .select-options li {
        padding: 4px 8px;
        cursor: pointer;
    }
    .select-options li:hover {
        background: #f0f0f0;
    }
</style>
<script>
    $(document).ready(function() {
        const $trigger = $('#selectTrigger');
        const $options = $('#selectOptions');
        const $showBtn = $('#showSelect');
        
        $showBtn.on('click', () => {
            $options.toggle();
        });
        
        $trigger.on('click', () => {
            $options.toggle();
        });
        
        $options.on('click', 'li', function() {
            const text = $(this).text();
            $trigger.text(text);
            $options.hide();
        });
        
        $(document).on('click', (e) => {
            if (!$(e.target).closest('.custom-select').length && e.target.id !== 'showSelect') {
                $options.hide();
            }
        });
    });
</script>

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