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/

Answer 2

万一有人回来了，我根据@techfoobar的示例提出了一个略有不同的解决方案。

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

经过测试： -当前的chrome，firefox，edge（铬），即11

用法：

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

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

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

Answer 3

尽管您不需要jQuery。有一个非常简单的解决方案。
此代码段仅使用了输入和标签标签，在这些标签中，我们隐藏了单选按钮圆圈，而改用了按钮

<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>

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

3 个答案: