Is it possible to convert a select menu to buttons?

Question

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>

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/

techfoobar · Accepted Answer · 2013-09-21T14:42:54.000

12

Update:

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.

Demo: 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 **/
}

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

edited Sep 21 '13 at 14:42

answered Sep 21 '13 at 10:57

techfoobar

65,616
14
114
135

Thanks fo rgetting back with this, I was wondering, inspecting the code with Firebug - will this still pass the select option value, when submitting the form, or has this simply replaced the select with buttons? - I think we're on to a winner here. – user2736203 Sep 21 '13 at 13:37
You're are right with the suspicion. This wont pass any value on form submit. For that we'll need to add a hidden element containing that value and fill it with the appropriate value when any option is clicked. – techfoobar Sep 21 '13 at 14:34
That looks great to me, hey, I want to give a sincere thank you for taking the time in helping me today, greatly appreciated. – user2736203 Sep 21 '13 at 18:21
There seems to be an error, if the option includes "selected" parameter, then not only this option is marked as selected but next options are marked as selected too - http://jsfiddle.net/tu68dyzz/ – Phoca Oct 05 '16 at 12:50

Koshimon · Answer 2 · 2020-03-24T15:10:54.043

7

In case someone comes back to this, I came up with a slight different solution based on the example from @techfoobar.

basically: - dynamic code (can be used for multiple selects on the same page) - no need of hidden fields, select is still there (hidden)

tested: - current chrome, firefox, edge (chromium), ie11

Usage:

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

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

// yay, this is my first post here, feedback welcome :)

edited Mar 24 '20 at 15:10

answered Mar 24 '20 at 14:59

Koshimon

71
1
2

1

You should paste the entire function here. Other than that this solution works great! – Guillermo Carone Jun 29 '20 at 16:02

score 5 · Answer 3 · edited Dec 13 '20 at 00:27

You don't need jQuery for this thing though. There's a very simple solution to this.
This code snippet makes use of just input and label tags where we hide the radio button circle and use a button instead

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

This is amazing! I used this trick with my own styling on the labels (instead of Boostrap `btn`). Also I put all styles in CSS files, not inline like it's shown here (which is repetitive!). It works for form submission too (unlike the accepted answer which doesn't have any logic to ensure the form works, which makes it utterly pointless!). Just make sure to use the same name, and different ID properly and be sure to put the same ID in both the label and the corresponding radio. BTW, if you want to remove the radio from affecting the page layout completely, put `display: none` instead. — ADTC, Feb 20 '21 at 13:24

Is it possible to convert a select menu to buttons?

3 Answers3

Linked