jQuery Convertir Sélectionner à boutons Radio?
Je suis en train de convertir sélectionner les boîtes à boutons radio à la volée à l'aide de 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 le convertir au chargement de la page à l'aide de 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, de sorte qu'il sera en boucle dynamiquement pour chaque zone de sélection et chaque option à l'intérieur (comme les différents produits ont différentes options)
Je suis à essayer de comprendre la meilleure façon. Soit pour obtenir un tableau multidimensionnel de toutes les valeurs d'abord, puis construire les boutons de la radio.. ou changer une à une dans une boucle. Actuellement, la tentative de l'ancien, mais je pense que j'ai peut-être avoir à y penser:
$(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 a déjà essayé ce ou avez un secret/moyen plus facile de le faire que je suis absent?
OriginalL'auteur Dss | 2010-01-08
Vous devez vous connecter pour publier un commentaire.
J'ai mis cela ensemble, et testé dans quelques navigateurs, tous semblent à la poignée c'est bien. Il va prendre les données de la
<option>
éléments et de créer de la<input/><label/><br/>
pour chacun d'eux, puis retirez la boîte de sélection.C'est parfait! Merci à vous deux!
merci mais l'étiquette clique ne fonctionne pas remplacer les deux lignes 1:
$radio.attr('name', $select.attr('name')).attr('id', $option.val());
**2.**$("<label />").attr('for', $option.attr('value')).text($option.text()) );
en fait de la deuxième ligne doit être remplacé comme ce
$("<label>").attr('for',$radio.attr('id')).text($option.text()) );
Cette solution a très bien fonctionné pour moi, après quelques modifications mineures:
$option.attr('selected')
nécessaires pour être$option.is(':selected')
parce que ma liste déroulante n'a pas d'option avec l'attribut sélectionné (le premier a été pré-sélectionné.) J'ai également eu à créer un ID pour le radio bouton, de sorte que le pour="" serait de travailler.$radio.attr('id', $select.attr('id') + '_' + $option.attr('value'));
Une fois que votre radio a sa propre identité, @Claudiu la suggestion de fonctionner. Dans mon cas, ils ne disposent pas de leurs propres Id mais.OriginalL'auteur gnarf
Vous êtes sur la bonne voie. Itérer et de recueillir sélectionner les données dans des variables et de faire aussi peu de DOM opération appels que possible (pour l'efficacité) pour créer l'entrée radio.
OriginalL'auteur micahwittman