Convert dropdowns to radio buttons w/o modifying HTML

Question

So this is sort of an exceptional case situation - I have a plugin that I can't modify for contractual reasons. It displays a set of drop downs and I need it to display a set of radio buttons instead. Is there a js/jquery method for converting dropdowns to radio buttons w/o changing the HTML. Remember, I can add stuff - I just can modify the plugin (and thus the HTML) directly.

I get that this is a bad way to do it, trust me I don't like it any more than you do.

Possibly by detecting the values of the drop-down options and then reformatting them as radio buttons, hiding the original dropdown?

<form action="http://example.net/store/cart/" method="post" class="shopp product"> 
                <ul class="variations"> 
            <li> 
<label for="options-1">Music Download</label> 
<select name="products[117][options][]" class="category-catalog product117 options" id="options-1"><option value="">Select an option</option> 
<option value="1">Full Album</option> 
<option value="7">Theme</option> 
<option value="8">Simian Segue  </option> 
<option value="9">DK Island Swing</option> 
<option value="10">Cranky's Theme</option> 
<option value="11">Cave Dweller Concert</option> 
<option value="12">Bonus Room Blitz</option> 
<option value="13">Aquatic Ambiance</option> 
<option value="14">Candy's Love Song</option> 
<option value="15">Bad Boss Boogie</option> 
<option value="16">Mine Cart Madness</option> 
<option value="17">Life in the Mines</option> 
<option value="18">Voices of the Temple </option> 
</select></li> 

        </ul> 
                <p> <select name="products[117][quantity]" id="quantity-117"><option selected="selected" value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="20">20</option><option value="25">25</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="75">75</option><option value="100">100</option></select>      <input type="hidden" name="products[117][product]" value="117" /><input type="hidden" name="products[117][category]" value="catalog" /><input type="hidden" name="cart" value="add" /><input type="submit" name="addtocart"  value="Add to Cart" class="addtocart" /></p> 

    </form>

Answer 1

Hide the dropdown and place the new radio elements outside the form, they don't need to post, just update the dropdown value.

Here is a code example on jsFiddle.

$("#d option").each(function(i, e) { // get the options
    $("<input type='radio' name='r' />") // create a radio element
        .attr("value", $(this).val()) // set the value
        .attr("checked", i == 0) // check the first by default
        .click(function () { // add event click which updates the dropdown
            $("#d").val($(this).val()); // update the dropdown if clicked
        })
        .appendTo("#r"); // append to some visible place
});