当然，静态的，使用少量的 JS……但这实际上只是创建一个单选按钮列表来代替你的 DDL，然后放置你自己的按钮，通过 JS 映射到它们（提示：利用 .previousElementSibling.checked）-或者，更好的是，您自己的“按钮”实际上只是labels 的样式，看起来 像按钮，并且完全不需要 JS。我会把这个解决方案留给其他人来写，因为，或者......
当然，动态地，使用 -native- JS。需要触摸 DOM，但如果您害怕触摸 DOM，请注意，。
此特定实现的问题...
- 会在不支持dataset (caniuse) 的浏览器中中断。要解决此问题，只需将按钮上硬编码的onclick 中的dataset 替换为等效的.getAttribute() 调用
- 如果其他东西在运行后在 ddls 下添加一个元素，则会中断
- 手动创建 btns 和无线电，而不是通过 document.createElement
- 将 onclick 事件硬编码到按钮中，而不是作为适当的事件触发器
- 在name 属性中保留 2 个类名（调用、包装器）和一个伪命名空间
- 如果您可以将下拉列表转换为实际 HTML 中的单选按钮列表，而不是通过 javascript 进行，那么这有点没有意义，因为您应该这样做。
小提琴：https://jsfiddle.net/cxbandh2/1/
Javascript：
(function(){
//config
var ddl_to_btns_class = 'ddl2btns';
var wrapper_div_class = 'ddl2btn-wrapper';
var radio_btn_name_prefix = '_ddl2btns$';
//Personal pseudo-library functions
//getElementByID
function $(s, d) { return (d || document).getElementById(s); }
//getElementsByClassName
function $$(s, d) { return (d || document).getElementsByClassName(s); }
//inserts an element as a younger sibling
$.youngerSib = function (ele, sib) { ele.parentNode.insertBefore(sib, ele.nextSibling); }
var ddls = $$(ddl_to_btns_class);
for(var i = ddls.length>>>0; i--;){
//generate our button list
var optcnt = ddls[i].options.length >>> 0;
var btns = new Array(optcnt);
for(var j = optcnt; j--;){
btns[j] = "<input type='radio' disabled hidden name='" + radio_btn_name_prefix + i +"' /><button type='button' data-ddlv='" + j + "' onclick='this.previousElementSibling.checked = true; this.parentElement.previousElementSibling.selectedIndex = parseInt(this.dataset.ddlv);'>" + ddls[i].options[j].text + "</button>";
}
//generate "widget"
var wrapper = document.createElement("div");
wrapper.className = ddl_to_btns_wrapper_class;
wrapper.innerHTML = btns.join('');
//insert widget & hide ddl
$.youngerSib(ddls[i], wrapper);
ddls[i].hidden = true;
}
})();
示例 HTML：
<select class="ddl2btns">
<option>dog</option>
<option>cat</option>
<option>lizard</option>
</select>
示例 CSS：
.ddl2btn-wrapper > input:checked + button{
background-color:#aaf;
}