是否可以将选择菜单转换为按钮? [英] Is it possible to convert a select menu to buttons?

问题描述

例如，我有一个简单的选择菜单.

I have a simple select menu e.g.

<p>Would you recommend this company?</p>

<select>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

我想征求用户的反馈，目前它是通过简单的表单提交功能提供的，现在是2013年，我希望将其设置为2个按钮，例如竖起大拇指"或竖起大拇指"(选中时突出显示)/可互换(例如，一次不能选择2).

That I ask for user feedback, it's currently power by a simple form submit, now it's 2013 i'd love to make it 2 x buttons e.g. "Thumbs Up" or "Thumbs Down" (And highlights when selected)/interchangable (e.g. can't select 2 at once).

到目前为止，...实际上并没有应用选择值或选定"效果:

Got this far... But it's not really applying the select values or a "selected" effect:

http://jsfiddle.net/mBUgc/18/

最近我要看的是以下内容...它将选择菜单转换为星级...-但这并不是真正有用的，因此希望有人可以帮助/指出正确的方向或提供一些代码示例.

Closest i've come to is the following...which converts select menus to star ratings... - But it's not really a usable, so hopefully someone can help/point in right direction or a little code example.

http://netboy.pl/demo/jquery-bar-rating/examples /

推荐答案

更新:

添加了隐藏元素以提交所选值的表单.

Hidden element added for form submission of chosen value.

http://jsfiddle.net/mBUgc/21/

这是您要实现的目标的简单实现.

Here's a simple implementation of what you are looking to achieve.

演示: http://jsfiddle.net/mBUgc/19/

JavaScript :

$("select option").unwrap().each(function() {
    var btn = $('<div class="btn">'+$(this).text()+'</div>');
    if($(this).is(':checked')) btn.addClass('on');
    $(this).replaceWith(btn);
});

$(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
});

CSS :

div.btn {
    display: inline-block;
    /** other styles **/
}
div.btn.on {
    background-color: #777;
    color: white;
    /** styles as needed for on state **/
}

注意:无论您选择了多少选项，它都将起作用- http://jsfiddle.net/mBUgc/20/

Note: This will work regardless of the number of options you have in your select - http://jsfiddle.net/mBUgc/20/

这篇关于是否可以将选择菜单转换为按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！