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