Select amelioration jquery

un petit up

Salut,

Effectivement lors que clique sur l'élément .hida1 tu vas appeler l'ouverture/fermeture du slide (toggleSlide) sur le sélecteur css ".mutliSelect1 ul", c-a-d tout les éléments ul contenu dans un élément dont la classe est multiSelect1.
Puisque tes deux select corresponde a ce sélecteur, il s'ouvre donc tout les deux.

Pour corriger ceci il faut donc modifier le sélecteur pour n'appliquer le toggleSlide uniquement sur le select concerné.
On peut faire comme ceci :

$(document).delegate(".hida1","click",function(){
    $(".mutliSelect1 ul", $(this).parent()).slideToggle('500');
});

Explications :
- $(this) dans cette fonction correspond à l'élément cliqué (ici .hida1)
- $(this).parent() correspond à l'élément parent de l'élément cliqué (donc l'élément parent de .hida1, ici il s'agit de l'élément <dl class="dropdown multiple-choix">)
- $(".mutliSelect1 ul", $(this).parent()) correspond à l'élément ".mutliSelect1 ul" qui est dans $(this).parent(), c-a-d le select contenu dans l'élément parent de l'élément cliqué, autrement dit le select à coté de l'élément cliqué

Pour l'affichage des valeurs sélectionnées, une solution serait de créer un nouvel élément à l'endroit où tu souhaites afficher ces valeurs et de modifier le sélecteur de l'élément sur lequel tu affiches ces valeurs (ligne 10 dans le jsfiddle) :

var span = $("...");

Bonne journée,

bonjours j'ai retester

donc j'ai modifier

html

                                                                       <dl class="dropdown">
																	   <dt class="hida1">select<span></span></dt>
																	   <dd><nav class="mutliSelect1"><ul>
																	                                     <li><p><input type="checkbox" id="Apple" name="Apple" value="Apple" /><label for="Apple">Apple</label></p></li>
																										 <li><p><input type="checkbox" id="Blackberry" name="Blackberry" value="Blackberry" /><label for="Blackberry">Blackberry</label></p></li>
																										 <li><p><input type="checkbox" id="HTC" name="HTC" value="HTC" /><label for="HTC">HTC</label></p></li>
																										 <li><p><input type="checkbox" id="Sony Ericson" name="Sony Ericson" value="Sony Ericson" /><label for="Sony Ericson">Sony Ericson</label></p></li>
																										 <li><p><input type="checkbox" id="Motorola" name="Motorola" value="Motorola" /><label for="Motorola">Motorola</label></p></li>
																										 <li><p><input type="checkbox" id="Nokia" name="Nokia" value="Nokia" /><label for="Nokia">Nokia</label></p></li>
																       </ul></nav></dd>
																	   </dl><p class="choix"><span></span></p>

donc on affiche les mots <p class="choix"><span></span></p>

et dans js

//variables
var p = $(".choix span");
var string = 'Select '; 

il ne veux pas m'afficher

merci

Concernant ton dernier commentaire :

quand tu coche choix 1 il le met sur les autres selec malgrez que j'ai mis un id différent id="choix 5" etc...
Pour que le choix de l'utilisateur d'affiche uniquement dans le select ou la case est cochée, il faut modifier le sélecteur où on affiche ce choix afin de ne sélectionner que le select concerné (dans ton code il s'agit de l'élément .hida1 span).
A partir de ton dernier jsfiddle, on peut utiliser le sélecteur suivant :

var p = $(".hida1 span", $(this).parent().parent().parent().parent().parent().parent());

Oui la suite de .parent() un peu moche vient du fait que l'événement onchange est appliqué sur l'input checkbox. Pour récupérer l'élément .hida1 span du select où la checkbox est coché, il faut donc remonter tout les éléments parent à partir de cette checkbox (les éléments p, li, ol, nav, dd et dl).

Le même principe est utilisé pour récupérer la liste des checkbox cochées afin de ne pas afficher tous les choix dans tous les selects.

ensuite quand tu ouvre le 1 er select et si tu ouvre le 2 eme select il oublie de fermer le 1 er select
Pour fermer les autres select à l'ouverture de l'un d'entre eux, on peut ajouter la ligne suivante dans la fonction qui gère le clique sur .hida1 :

$(document).delegate(".hida1","click",function(){
  $(".mutliSelect1 ol").not($(".mutliSelect1 ol", $(this).parent())).slideUp('500'); // fermer les autres select
  $(".mutliSelect1 ol", $(this).parent()).slideToggle('500'); // ouverture du select
});

-> on ferme (slideUp) tous les selects sauf celui cliqué (not($(".mutliSelect1 ol", $(this).parent())))

si je décoche il remet pas le mot select

On peut simplement vérifier si la chaine est vide avant de l'afficher, et si c'est le cas ajouter "Select" dans cette chaine :

newstring = string.substring(0,string.lastIndexOf(','));
if (newstring == '') {
    newstring = 'Select';
}
p.html(newstring);

Le jsfiddle mis à jour : https://jsfiddle.net/pqobmyeh/2/

Enfin dans le cas d'un choix unique, une liste d'input de type radio ou une vrai balise html <select> peuvent effectivement être utilisées.