Question

是否可以将三个选项的下拉菜单替换为三个并排按钮？我在网上看了一下，似乎找不到类似的东西。

下面是我目前的设置。

这就是我要用下载菜单替换的方法。（引导按钮组）

这是当前的下拉代码。

  <div class="dropdown">

    <select id="selectMe">
        <option value="iPhone">iPhone</option>
        <option value="iPad">iPad</option>
        <option value="Samsung">Samsung</option>
    </select>




</div>

任何帮助将不胜感激。约什

然后将该选项传递给一个java脚本，这是我在简单地切换这两个脚本时遇到的问题。

<script type="text/javascript">

$(document).ready(function () {
$('.group').hide();
$('#iPhone').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});


</script>

Answer 1

当然，静态地，少量的JS ......但这只是创建一个单选按钮列表代替你的DDL，然后把你自己的按钮通过JS映射到它们（提示：杠杆.previousElementSibling.checked ） - 或者，更好的是，你自己的“按钮”实际上只是label样式的看起来像按钮，并且完全需要JS。我会把这个解决方案留给别人写，因为，或者......

当然，动态地，使用-native- JS。如果您害怕触摸DOM，则需要触摸DOM但是tbh＆lt;在此插入一般侮辱＆gt;。

此具体实施的问题......
- 会破坏不支持dataset（caniuse）的浏览器。要解决此问题，只需在按钮上更换硬编码dataset中的onclick，即可获得等效的.getAttribute()来电。 - 如果在此运行之后其他东西在ddls下面添加了一个元素，则会中断 - 创造btns＆amp;无线电手动而不是通过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;
}

Answer 2

否，使用当前的html，不可能有并排按钮。因为无法设置option标签的样式。它由操作系统呈现。 refer here

除background-color和color之外，通过应用的样式设置选项元素的样式对象将被忽略。

虽然你可以编辑html。然后你会改变它作为bootstrap建议，它会工作得很好:)。

Answer 3

绝对可能。只有引导程序。我不确定你现在使用的是什么，但我可以给你一些好的建议来开始..
如果你现在不太了解bootstrap，那就不要出汗了。经过一段时间的练习，它很容易上手。稍微阅读一下，如果你想要下载一个bootstrap模板，或者在VS中启动一个空白的应用程序（当然还有bootstrap插件）并开始破解。

这里有几个链接让你开始。
Tutorial Republic guys are good
Here's another good link I used when I was getting started with BS

希望这有帮助！

使用并排按钮而不是下拉

3 个答案: