Select amelioration jquery

Fermé
roger - 15 août 2016 à 12:48
 roger - 15 sept. 2016 à 22:22
Bonjour,

j'ai essayer de faire un selecte multiple choix

https://jsfiddle.net/hL7agn42/

mais quand j'ouvre un select il m'ouvre le 2 éme select hors il ne faut pas les ouvrir

donc j'ai tester de remplacer class par id

mais ca ne marche pas

et aussi si je coche apple il faudra l'affiché a droite du select que la il s'affiche dans le select

merci de votre aide

4 réponses

Réponse 1 / 4
roger
19 août 2016 à 12:18
un petit up
0
Réponse 2 / 4
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
19 août 2016 à 12:50
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,
0
roger
19 août 2016 à 18:16
merci, juste une question

https://jsfiddle.net/e2vpdL7j/


quand j'ouvre un select il m'ouvre bien

mais si je réouvre le 2 eme select il ne ferme pas mon premier select il reste ouvert

ensuite
pour afficher à côté du select
j'ai pensé mettre 

//variables
var span = $("dl");
var string = '    ';


là le souci il m'efface tout les select

ensuite j'ai un autre souci

merci
0
Réponse 3 / 4
roger
20 août 2016 à 10:37
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
0
roger
23 août 2016 à 22:14
excuse un petit up
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
24 août 2016 à 09:14
Ton sélecteur semble correct. A partir de ton premier code, il faut bien modifier la ligne 
span.html(newstring);
par 
p.html(newstring);
.

Peut tu stp nous montrer ton code js entier ou nous donner le lien du jsfiddle mis à jour ?
0
roger
25 août 2016 à 13:46
bonjours j'ai un peut modifier le code

https://jsfiddle.net/pqobmyeh/
là il m'affiche ben le mot à côté meme là si c'est pas bien présenté

mais le souci 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...

ensuite quand tu ouvre le 1 er select et si tu ouvre le 2 eme select il oublie de fermer le 1 er select

et après je crois que c'est finit pour le select multple choix

j'ai tester pour un choix simple 

                       <dl class="dropdown multiple-choix">
					                                       <dt class="hida1"><p class="choix_membre"><span>Sélect</span></p></dt>
														   <dd><nav class="mutliSelect1"><ol>
														                                     <li><p><input type="checkbox" id="choix 1" name="choix 1" value="choix 1" /><label for="choix 1">choix 1</label></p></li>
																							 <li><p><input type="checkbox" id="choix 2" name="choix 2" value="choix 2" /><label for="choix 2">choix 2</label></p></li>
																							 <li><p><input type="checkbox" id="choix 3" name="choix 3" value="choix 3" /><label for="choix 3">choix 3</label></p></li>
																							 <li><p><input type="checkbox" id="choix 4" name="choix 4" value="choix 4" /><label for="choix 4">choix 4</label></p></li>
															</ol></nav></dd></dl>


là si je choisit choix 1, il m’efface bien le mot select et si je décoche il remet pas le mot select et là il faudra choisir un choix et non plussieur choix peut ete il faudra supprimer les type radio dans le cas des choix simple

je te met un exemple sur le lien

https://jsfiddle.net/pqobmyeh/1/
0
Réponse 4 / 4
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
25 août 2016 à 14:59
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.
0
roger
26 août 2016 à 09:05
merci, je vais regardé ca de plus prêt avant de mettre résolu

et si j'ai une question je te dirait sinon je mettrais résolue
0
roger
26 août 2016 à 09:30
juste une question

quand on coche un choix là il se met dans le select sur .hida1 span

mais si je veux afficher sur <p class="choix_membre"><span></span></p>

donc j'ai mis .hida1 span, .choix_membre p ou .hida1 span, .choix_membre span

là il ne veux pas affiche sur la class choix_membre

je mettrait affichage du choix soit sur la class hida1 ou soit choix_membre

après ca sera tout
0
roger
30 août 2016 à 14:43
un petit up car j'ai tester mais il n’apparaît pas dans ma class choix membre

merci

peut etre 

//variables
var p = $(".hida1 span",


il faut rajoute en sous une clss choix_membre

come ca on affiche choix_membre ou soit hida1 

// on affiche le mot pour choisir un choix
var p = $(".hida1 span",
// là on affiche sur cette class plussieur choix

var p = $(".choix_membre span",


je penses ca mais ça n'a rien changer ca n'aparait pas ;)

merci
0
roger
5 sept. 2016 à 21:11
un petit up lol
0
roger
15 sept. 2016 à 22:22
un petit up merci
0

Discussions similaires

Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
"Please select a boot device " ? ???
EtienneRMsss -
Malekal_morte- -

1 réponse
Please select boot device
Pauline Emmy -
nadellen -

5 réponses
Select boot device première utilisation
eleagtte -
bazfile -

7 réponses
Asus bloqué au demarrage : reboot and select proper boot device
C -
R_7387 -

4 réponses