jQuery: Stockage du contenu de select-box à variable?

Question

J'ai un champ de sélection sur ma page HTML qui est rempli avec quelques éléments par défaut. Avec l'aide d'AJAX, je remplace le contenu (options) dans le champ de sélection par des options appropriées.

Comment puis-je stocker le contenu (options) de mon champ select dans une variable, puis le charger de nouveau dans le select? Il serait utile de pouvoir récupérer les options par défaut du champ select.

Merci!

Answer 1

Vous pouvez utiliser jQuery's .clone() method sur les éléments d'origine afin de garder une référence à une copie de dans son état d'origine.

var $default_opts = $('#mySelect').children()//.clone(); 

J'utilisé jQuery's .children() ici pour garder un peu plus générique dans le cas où vous utilisez <optgroup> éléments.

Quand vient le temps de revenir aux originaux, vous pouvez faire quelque chose comme ceci:

$('#mySelect').empty().append($default_opts.clone()); 

Ce vide le <select> de son contenu actuel, et ajoute un clone des paramètres par défaut afin que votre copie est conservée dans son état d'origine.

---

EDIT: J'ai mal lu partie de la question. Vous n'auriez pas besoin de la première .clone().

Answer 2

Mon chemin serait d'utiliser la fonction .data de jQuery pour stocker les options html.

select_box = $("#select-box"); 
select_box.data("orginal_options", select_box.html()); 
select_box.html("<option value='1'>New Option</option>"); 

Pour resotre:

select_box.html(select_box.data("original_options")); 

Bien sûr, ce sont les idées de base, comme je ne sais pas vraiment comment est votre logique. (Et s'il vous plaît corrigez-moi si je me trompe).

Answer 3

Si vous souhaitez restaurer les objets au lieu du html() - chaîne, vous pouvez utiliser Détacher()

//remove options from select and hold them inside a variable 
var defaults=$('select option').detach(); 

//clear select and restore the defaults 
$('select').empty().append(defaults); 

Un exemple comment l'utiliser avec replaceWith():

<select id="target" size="3"> 
<option>a 
<option>b 
</select> 
<input type="button" 
    value="replace" 
    onclick="fx($('#target'),this)" 
    /> 

<script type='text/javascript'> 
function fx(o,b) 
{ 
if(b.value==='replace') 
{ 
    o.data('defaults',$('option',o).replaceWith('<option>1</option><option>2</option>')); 
    $(b).val('restore'); 
} 
else 
{ 
    $(o).empty().append($(o).data('defaults')); 
    $(b).val('replace'); 
} 
} 
</script> 

http://jsfiddle.net/doktormolle/Sgn72/