jquery - 选择充当下拉菜单，防止使用 HTML 更改文本/选择

Question

好奇的是，我正在使用 HTML select 来获取响应式表格中的其他选项。漂亮的 HTML/CSS 下拉菜单不起作用，因为它们嵌套在可滚动的响应表中，所以它们被截断了。最好的解决方案是只使用 HTML select，但我不希望实际的菜单选项(例如重命名、复制、删除)更改占位符文本(例如更多)，而是我想让它们执行这些操作而无需更改文本。希望这是有道理的，基本上可以像典型的 CSS 下拉菜单一样工作。想法？想法？

示例: https://jsfiddle.net/gqh5at0u/

<select class="form-control">
    <option value="" disabled selected hidden>More</option> <!-- I want this to stay visible -->
    <option>Rename</option>
    <option>Duplicate</option>
    <option disabled="disabled">----</option>
    <option>Delete</option>
</select>

Answer 1

您可以在捕捉到事件时重置该值。

$('.form-control').on('change', function(evt) {
    var select = $(this);
    alert(select.val()); // do stuff
    
    select.val('none');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
    <option value="none" disabled selected hidden>More</option> <!-- I want this to stay visible -->
    <option>Rename</option>
    <option>Open in Editor</option>
    <option>Duplicate</option>
    <option>Shift Due Date</option>
    <option>Copy from Section</option>
</select>