Skip to content

Instantly share code, notes, and snippets.

@salsalabs
Created May 5, 2014 16:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save salsalabs/fa0d652fab4e984cd38e to your computer and use it in GitHub Desktop.
Save salsalabs/fa0d652fab4e984cd38e to your computer and use it in GitHub Desktop.
Convert a Salsa picklist from a dropdown to a list of radio buttons
<script type="text/javascript">
/*
* Script to convert a picklist <select> tag into a series of radio buttons.
*/
$(document).ready(function () {
var name = "tee_shirt_size";
var select = $('select[name="' + name + '"]');
if (select.length == 1) {
var id = select.attr('id');
var style = select.attr('class');
var label = select.parent().parent().find('label');
label.attr('for', id + '_right');
// The row is converted to a <div> for the label and a <div> for
// the radio buttons. This makes sure that they stay divided, otherwise
// most of radio buttons would drift to the left edge.
//
select.parent().parent().append('<div style="float:left;" id="' + id + '_left"></div>');
$('#' + id + '_left').append(label);
select.parent().parent().append('<div style="float:left;" id="' + id + '_right"></div>');
select.parent().parent().append('<div class="clear"></div>');
select.find('option').each(function () {
console.log('option: ', $(this).attr('value'));
var value = $(this).val();
if (value.trim().length > 0) {
var text = $(this).html();
var input = '<input type="radio"'
+ ' name="' + name + '"'
+ ' class="radio_select"'
+ ' value="' + $(this).val() + '"'
+ '>' + text + '</input>';
// If items have too muc whitespace, then fix the CSS for .radio_select_line
// OR use this instead:
var line = input + '<br/>';
// var line = '<p class="radio_select_line">' + input + '</p>';
$('#' + id + '_right').append(line);
}
});
select.remove();
}
});
</script>
@davidsdesk
Copy link

Great script, but I have a question. How can I retain the "selected" status of select items when they are converted to radio buttons" In other words, convert: selected="selected" into: checked="checked"?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment