Le plugin Stylish-Select de jQuery ne fonctionne pas sur les éléments créés après chargement de la page

Question

Je me suis efforcé d'utiliser Stylish Select Box avec des éléments créés après le chargement de la page sans succès. Pour comprendre le problème, vous devez d'abord le reproduire. Je sais que ce qui suit peut sembler un peu ennuyeux mais s'il vous plaît continuez à lire si vous avez 5 minutes de temps libre.

Vous pouvez également obtenir un exemple complet here pour voir le problème directement.

D'abord, vous aurez besoin d'un élément <select>. Maintenant, liez jquery.stylish-select.js à votre élément <select> en utilisant quelque chose comme $('select').sSelect(); après que le script cache l'élément <select> et crée un ensemble de DIVs en dessous. Maintenant, votre page doit ressembler à ceci:

<select style="display:none;"> 
    <option>1</option> 
    <option>2</option> 
</select> 
<div class=newListSelected> 
    <!-- Some other stuff(not important). --> 
</div> 

Maintenant, ajoutez un autre élément <select> à la même page avec quelque chose comme $('body').append('<select><option>1</option><option>2</option></select>')​ et utiliser $(.newListSelected).remove(); pour supprimer les DIVs qu'elle a créée pour l'option `drainant. J'espère que je suis assez clair.

Après cela, vous devez avoir les éléments suivants sur la page:

<select style="display:none;"> 
    <option>1</option> 
    <option>2</option> 
</select> 
<select> 
    <option>1</option> 
    <option>2</option> 
</select> 

dernier, il suffit d'appeler $('select').sSelect(); une fois de plus. Il devrait créer DIVs sous les deux de vos <select> éléments. Maintenant, voici le problème, la première boîte de sélection représentée par les DIVs ne se comporte pas correctement.

Vous pouvez également obtenir un exemple complet here pour voir le problème directement.

Normalement lorsque vous choisissez une option dans la zone de sélection représentée par les DIVs, il doit mettre à jour selectedIndex de l'élément <select> original (propriété DOM) à l'indice correspondant de l'option choisie (0 pour la première option 1 pour la seconde .. etc). Mais si vous regardez de plus près, vous verrez sa valeur selectedIndex changer à -1 pour n'importe quelle option.

Comme je suis vraiment nouveau sur Javascript, je n'ai aucune idée de son comportement. Ce à quoi je ne pouvais que penser serait dû au fait que le premier élément est lié deux fois à , causant ainsi des problèmes DOM.

Answer 1

Je pense que vous ne pouvez pas simplement supprimer le div. pourquoi ne pouvez-vous pas annuler la chose sSelect? Je suis sûr qu'il ya une option ou détruire ou enlever tout, donc enlever la sSELECT correctement, puis essayez à nouveau :)

Answer 2

u doivent appeler la fonction sSELECT une fois de plus après avoir créé les éléments

$(document).ready(function(){ 
    $('select').sSelect(); 
}); 

$('.add').click(function() { 
    $('body').append('<select><option>1</option><option>2</option></select>') 
    $('select').sSelect(); 
}); 

$('.bind').click(function() { 
    $('.newListSelected').remove(); 
    $('select').sSelect(); 
}); 

Answer 3

ici est ce que votre JS devrait ressembler à:

$(document).ready(function() { 
    $('select').sSelect(); 

    $('.add').click(function() { 
     var newSelect =$('<select><option>1</option><option>2</option></select>').appendTo('body'); 
     $(newSelect).sSelect(); 
    }); 

    $('.bind').click(function() { 
     $('.newListSelected').remove(); 
    }); 
});​ 

L'astuce consiste à utiliser appendTo au lieu de append. Cela renverra le select nouvellement créé, de sorte que vous pouvez utiliser .sSelect() dessus.

Answer 4

reset élégant Sélectionner la fonction

$('select').resetSS(); 

Answer 5

utilisez la fonction resetSS() après la manipulation de vos sélectionner les options.

$('#sel2').sSelect(); 

function refresh_select(id){ 
    $.getJSON("/ajax.php?cat="+id, function(data){ 
     $("select#sel2").loadSelect(data);  
     $("select#sel2").resetSS(); 
    }); 
});