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/