jQuery Convert Seleccione los botones de Radio?

Question

Estoy intentando convertir cuadros de selección en botones de radio sobre la marcha usando jquery, y no estoy seguro de la mejor manera.

Ejemplo HTML:

<form id="product">  
    <select name="data[123]"> 
     <option value="1">First</option> 
     <option value="2">Second</option> 
     ...... 
     <option value="n">xxxxxx</option> 
    </select> 
    </form> 

Quiero convertirlo en carga de la página usando jQuery para:

<form id="product"> 
    <input type="radio" name="data[123]" value="1" /> 
    <label for="data[123]">First</label><br/> 
    <input type="radio" name="data[123]" value="2" /> 
    <label for="data[123]">Second</label><br/> 
    ...... 
    <input type="radio" name="data[123]" value="n" /> 
    <label for="data[123]">xxxxxx</label><br/> 
</form> 

Y tiene que ser dinámico por lo que se repetirá de forma dinámica para cada cuadro de selección y cada opción dentro (como diferentes productos tienen diferentes opciones)

Estoy tratando de encontrar la mejor manera. Ya sea para obtener una matriz multidimensional de todos los valores primero y luego construir los botones de radio ... o cambiarlos de uno en uno en un bucle. Actualmente intentar la antigua, pero creo que se me puede pensar demasiado que:

$(document).ready(function(){ 

    //Get Exising Select Options  
    $('form#product select').each(function(i, select){ 
     $(select[i]).find('option').each(function(j, option){ 
      //alert($(option).text()); 
      option[j] = []; 
      option[j]['text'] = $(option).text(); 
      option[j]['val'] = $(option).val(); 
     }); 
    }); 


    //Remove Select box 
    $('form#product select').remove(); 
}); 

Alguien ha probado esto o tener algún secreto manera/más fácil de hacerlo que me falta?

Answer 1

Puse esto junto, y lo probé en algunos navegadores, todos parecen manejarlo bien. Eliminará los datos de los elementos <option> y creará el <input/><label/><br/> para cada uno, luego eliminará el cuadro de selección.

//Get Exising Select Options  
$('form#product select').each(function(i, select){ 
    var $select = $(select); 
    $select.find('option').each(function(j, option){ 
     var $option = $(option); 
     // Create a radio: 
     var $radio = $('<input type="radio" />'); 
     // Set name and value: 
     $radio.attr('name', $select.attr('name')).attr('value', $option.val()); 
     // Set checked if the option was selected 
     if ($option.attr('selected')) $radio.attr('checked', 'checked'); 
     // Insert radio before select box: 
     $select.before($radio); 
     // Insert a label: 
     $select.before(
      $("<label />").attr('for', $select.attr('name')).text($option.text()) 
     ); 
     // Insert a <br />: 
     $select.before("<br/>"); 
    }); 
    $select.remove(); 
}); 

Answer 2

Estás en el camino correcto. Itere y recopile los datos de selección en variables y realice tan pocas llamadas de operación de DOM como sea posible (para mayor eficiencia) para crear las entradas de radio.