jquery - 是否可以将选择菜单转换为按钮？

Question

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

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

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

我请求用户反馈，它目前由一个简单的表单提交提供支持，现在是 2013 年，我很乐意将其设为 2 个按钮，例如“拇指向上”或“拇指朝下”(选择时会突出显示)/可互换(例如不能一次选择 2 个)。

到目前为止...但它并没有真正应用选择值或“选定”效果:

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

我最接近的是以下...它将选择菜单转换为星级评定... - 但它并不是真正可用，所以希望有人可以帮助/指出正确的方向或一些代码示例。

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

Answer 1

更新:

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

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

<小时/>

这是您想要实现的目标的简单实现。

演示: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/