jQuery Convert Sélectionnez les boutons radio?

Question

J'essaie de convertir des boîtes de sélection à des boutons radio à la volée en utilisant jquery, et je ne suis pas sûr de la meilleure façon.

Exemple 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> 

Je veux convertir au chargement de la page en utilisant jquery à:

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

Et il doit être dynamique il bouclera dynamiquement pour chaque zone de sélection et chaque option à l'intérieur (comme différents produits ont des options différentes)

J'essaie de trouver la meilleure façon. Soit pour obtenir un tableau multidimensionnel de toutes les valeurs, puis pour construire les boutons radio .. ou les échanger un à la fois dans une boucle. tente actuellement l'ancien, mais je pense que je suis Overthinking il:

$(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(); 
}); 

Quelqu'un at-il essayé ou avoir un moyen secret/plus facile de le faire que je suis absent?

Answer 1

Je l'ai mis ensemble, et testé dans quelques navigateurs, tous semblent bien le gérer. Il va prendre les données sur les éléments <option> et créer le <input/><label/><br/> pour chacun, puis supprimez la boîte de sélection.

//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

Vous êtes sur la bonne voie. Itérer et collecter les données sélectionnées dans des variables et faire le moins d'appels d'opérations DOM possibles (pour plus d'efficacité) pour créer les entrées radio.