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

Question

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

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

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

我要求用户反馈，它目前是通过一个简单的表单提交来实现的，现在是 2013 年，我很想把它做成 2 x 按钮，例如“拇指向上”或“拇指向下”（选中时会突出显示）/可互换（例如，不能一次选择 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/

Answer 2

如果有人回到这个问题，我会根据@techfoobar 的示例提出一个稍微不同的解决方案。

基本上： - 动态代码（可用于同一页面上的多个选择） - 不需要隐藏字段，选择仍然存在（隐藏）

测试： - 当前 chrome, firefox, edge (chromium), ie11

用法：

jQuery(document).ready(function($) {
  ReplaceSelectWithButtons($('#test'));
});

https://jsfiddle.net/koshimon/pobcvxf4/2/

// 是的，这是我在这里的第一篇文章，欢迎反馈:)

Answer 3

你不需要 jQuery 来做这件事。 有一个非常简单的解决方案。
这段代码 sn-p 仅使用输入和标签标签，我们隐藏单选按钮圆圈并使用按钮代替

<input type="radio" name="name_name" id="id_name" value="1" style="visibility: hidden;">
<label class="btn btn-primary" for="id_name">1</label>
<input type="radio" name="name_name" id="id_name2" value="2" style="visibility: hidden;">
<label class="btn btn-primary" for="id_name2">2</label>

input[type=radio]:checked + label {
  font-style: normal;
  color: rgb(56,110,246);
  border: 1px solid rgb(56,110,246);
  background-color: rgb(226,233,253)
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<input type="radio" name="name_name" id="id_name" value="1" style="visibility: hidden;">
<label class="btn btn-secondary" for="id_name" style="border: 1px solid grey;">1</label>
<input type="radio" name="name_name" id="id_name2" value="2" style="visibility: hidden;">
<label class="btn btn-secondary" for="id_name2" style="border: 1px solid grey;">2</label>