Discussion :

[alpha232]

Bonjour à tous,
j'ai réussi à implémenter un composant multiselect /Jquery avec check box intégré. J'essaie d'accéder via js aux valeurs et labels des "options", mais ça ne marche pas du tout.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
var sel1=document.forms['recherche_auto'].elements['control_6[]'];
var nbre_elem = sel1.length; 
for (var i = 0;i < nbre_elem;i++)
{
	//if (document.forms['recherche_auto'].elements['control_6[]'].options[i].selected) { alert(i); }
	if (sel1.options[i].selected) {alert (i);}
 
}

L'élement "options" est toujours null ou inexistant.
Faut-il utiliser une fonction spécifique JQUERY?

Alpha.

[danielhagnoul]

Bonsoir

En jQuery : http://api.jquery.com/selected-selector/

Mais je ne vois pas de jQuery dans votre extrait de code.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var sel1=document.forms['recherche_auto'].elements['control_6[]'];

on peut voir le html ?

[Watilin]

Bonjour,

un composant multiselect /Jquery avec check box intégré.

Si c’est un select multiple avec des checkboxes à l’intérieur, il y a des chances que la navigateur fasse n’importe quoi. On veut voir le code HTML !

[SpaceFrog]

on peut imaginer un truc sur le meêm ^rincipe que ça
http://www.developpez.net/forums/d89...s/#post5314095

[alpha232]

voici mon code js :
la fonction maj_aff_marques() devrait juste afficher l'index des elements qui ont été cochés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
$(document).ready( function() {
 
				$("#control_6").multiSelect( null, function(el) {
			$("#callbackResult").show().fadeOut();maj_aff_marques();
				});
});
 
function maj_aff_marques() {
var sel1=document.forms['recherche_auto'].elements['control_6[]'];
var nbre_marques = sel1.length;	
for (var i = 0;i < nbre_marques;i++)
	{
		if (sel1.options[i].selected) {alert (i);};
	}
}
</script>

et voici mon html (j'ai enlevé le code php qui remplit les options)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<select id="control_6" name="control_6[]" multiple="multiple" size="5">
<option value=""></option>
<option value="1">GOODYEAR</option>
<option value="2">MICHELIN</option>
<option value="3">BRIDGESTONE</option>
<option value="4">FULDA</option>
<option value="5">PIRELLI</option>
 </select>

[SpaceFrog]

tu es en jquery...
pourquoi ne pas utiliser each() ?

[alpha232]

bonsoir tout le monde,

En me basant sur l'exemple se trouvant http://api.jquery.com/selected-selector/,j'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#control_6 option:selected").each(function () {
                str += $(this).text() + " ";
              });

avec mon multi select qui s'appelle control_6,pour afficher les valeurs du select ds un div, mais cela ne marche pas. Par contre, si c'est un multiselect non personnalisé par Jquery, cela fonctionne. Faut-il utiliser plutôt le selecteur pour les checkbox?

Alpha.

[Watilin]

Mais c’est quoi cette histoire de checkbox ? Y’en a pas dans ton code HTML…
Sinon, essaye .val() plutôt que .text().

[alpha232]

En fait c'est un select qui affiche une liste d'elements sélectionnables avec des checkboxes (voir sources --> multiselect.js)

Alpha.

[Edit 2010-08-04 01:12]

Je crois avoir compris une partie du problème: Le code ...multiselect.js supprime complètement le select et le remplace par un div qui contient un checkbox par option trouvé ds le select, donc on ne sait accéder qu'aux valeurs des checkboxes créés. Mais pour la suite ... grrrrrrr je n'arrive qu'afficher le premier checkbox créé .....

Alpha.

Trouvé!!!
Ce sont bien des checkboxes dont il faut aller rechercher la valeur dans le div dont la classe est "multiSelectOptions", par contre pour afficher le label du checkbox, autrement dit le texte qui était entre les balises <option>, il faut utiliser le dom qui va chercher la valeur du texte du label du checkbox associé.

Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var virgule = 0;
var str_virgule ='';
$(".multiSelectOptions").find('INPUT:checkbox:checked').each( function() {
						 if (virgule > 0) str_virgule=', ';
						 if( $(this).parent().text() != "Toutes les marques" ) {
							 str = str + str_virgule + $(this).parent().text() ;
							 virgule++; }
					});
 $("#affich_mrq")[0].innerHTML = str;

Alpha.