Is it possible to convert a select menu to buttons?
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 :)
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>
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/