Bonjour,

Je suis entrain de travailler, sur une partie qui me prend vraiment beaucoup de temps et la je ne sais plus comment faire pour avancer.

Je peux avoir un nombre x de select (x représentant le nombre de serveur) avec toujours les mêmes options par contre je voudrai que quand une option est sélectionné, dans les autres select l'option soit en disabled et que quand on désélectionne une option toute les mêmes options repasse en enabled.

J'ai fait quelque essai via la fonction onchange de bootstrap-multiselect mais j'arrive à rien de très concluant, en plus je n'arrive pas à tenir compte de l’état initial.

Un fiddle est disponible http://jsfiddle.net/sqVD6/2/

Merci pour votre aide

12 réponses


Vallyan
Réponse acceptée

Ayé: http://codepen.io/fvilliers/pen/Dbhpr

Les lignes du JS modifiées sont les lignes 46, 48, 58 et 60, qui prennent maintenant en compte le niveau de hiérarchie de plus qu'est la div autour de tes select.

:D j'en ai chié mais c'était fun a faire ^^ J'ai réutilisé les tomates et mozzarella de l'exemple pour simplicité, mais ce sera bien évidement identique pour ton truc de serveur. html: [code]<select class="multiselect" multiple id="MS1">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select><select class="multiselect" multiple id="MS2">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select><select class="multiselect" multiple id="MS3">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select> currentSelectOptions.length ){ selection[currentSelectId].forEach(function(e, i, a){ element = e; index = i; if ( inArray(e, currentSelectOptions) == -1 ){ console.log( 'Unchecked option ' + element + ' at position ' + index + ' from select id #' + currentSelectId ); $currentSelect.siblings( ".multiselect" ).each(function(){ $(this).next().find("ul > li > a > label > input[value='"+element+"']").removeAttr('disabled').parents("li").removeClass('disabled'); $(this).children("option[value='"+element+"']").eq(index).removeAttr('disabled'); }); } }) } else { currentSelectOptions.forEach(function(e, i, a){ element = e; index = i; if ( inArray(element, selection[currentSelectId]) == -1 ){ console.log( 'Checked option ' + element + ' at position ' + index + ' from select id #' + currentSelectId ); $currentSelect.siblings( ".multiselect" ).each(function(){ $(this).next().find("ul > li > a > label > input[value='"+element+"']").attr('disabled', 'disabled').parents("li").addClass('disabled'); $(this).children("option[value='"+element+"']").eq(index).attr('disabled', 'disabled'); }); } }) } selection[currentSelectId] = currentSelectOptions; }); }); [/code] Et un codepen pour voir le tout fonctionner: [url=http://codepen.io/anon/pen/AuEIi]http://codepen.io/anon/pen/AuEIi[/url]

Merci Vallyan, on touche au but reste plus qu'à gérer les options qui sont déjà sélectionné au lancement de la page via ton exemple :
http://codepen.io/anon/pen/hsbdy

Aurai tu une idée ?

Bah moi je tricherai et je mettrai ca:

setTimeout(function(){
    $("select.multiselect").trigger('change')
}, 500)

quelque part dans le code (genre ligne 26 de mon JS sur le post précédent)

T'es plus ou moins obligé de faire un timeout vu que ton plugin ne permet pas de faire un callback, et qu'il prend quelques millisecondes pour faire son truc ... donc un timeout de 500 ms marche dans mes conditions, et devrait etre bon dans a peu pres tous les cas ...

Bon je ne comprend toujours pas pourquoi avec cakephp ça ne fonctionne pas, j'ai beau ajouté toute les éléments sur le code pen et pour l'instant il fonctionne toujours...

Bizarre, ca ...
Absolument rien ne fonctionne, ou seulement une partie ? Tu as un retour console ? tu as ton code quelque part ? (github ...)

Retour console :

Checked option proxy0451483t at position 3 from select id #Server1Vm 0451483t:470
Checked option fwpeda0451483t at position 4 from select id #Server1Vm 0451483t:470
Checked option commr0451483t at position 5 from select id #Server1Vm 0451483t:470
Checked option wksapps0451483t at position 6 from select id #Server1Vm 0451483t:470
Checked option logger0451483t at position 7 from select id #Server1Vm 0451483t:470
Checked option adel0451483t at position 8 from select id #Server1Vm 0451483t:470
Checked option opsi0451483t at position 0 from select id #Server2Vm 0451483t:470
Checked option date0451483t at position 1 from select id #Server2Vm 0451483t:470
Checked option winxp0451483t at position 2 from select id #Server2Vm 0451483t:470
Checked option rpwebdmz0451483t at position 0 from select id #Server3Vm 0451483t:470
Checked option cher0451483t at position 1 from select id #Server3Vm 0451483t:470
Checked option loiret0451483t at position 2 from select id #Server3Vm

Pour le github, en faite je devais le mettre dessus depuis le tout debut du projet mais j'ai zappé cette étape et je me retrouve avec des trucs de commencer de partout, hum je viens d'arriver, le temps de creer le depot et je te push ça ;)

Edit : https://github.com/bahamut45/rtx/blob/master/app/View/Etabs/edit.ctp

De ce que je comprends, ca a l'air de tourner pour ce qui est de détecter les options séléctionnées.
J'en déduit que ce qui ne marche pas c'est la mise a jour (disabled) des autres <select>.

Celle-ci se passe en deux temps:

  • Mise a jour de dropdown et de la checkbox qui sont créés par ton plugin jQuery multiselect (ligne 54).
  • Mise a jour également du select, en passant l'option en disabed (ligne 55). Note que cette étape n'est pas franchement nécessaire (vu que pas visible), mais c'est histoire que ce soit plus propre et que le <select> ET le UI soient cohérents.

Questions:
1/ Est-ce exact que ce qui foire c'est la mise a jour en 'disabled' de ton dropdown+checkbox
2/ Est-ce que ca foire (i) uniquement lorsqu'il y a des option pre-selectionnée, (ii) uniquement lorsque tu fais la selection toi-meme, (iii) ou dans les deux cas ?
3/ Si ca marche lorsque tu selectionnes a la main, est-ce que ca marche aussi si tu de-selectionnes tes options ?
4/ Si ca foire uniquement pour les options pre-selectionnées, est-ce que ca marche en tapant directement en console

$("select.multiselect").trigger('change')

5/ Lorsque tu t'attends a ce qu'une option soit en disabled mais qu'elle ne l'est pas (que ce soit au lancement ou apres un clic que tu as fait), si tu inspectes ton select, l'option est-elle en disabled (c-a-d seulement le dropdown+checkbox ne le sont pas) ou est-ce que l'option de ton select ne l'est pas non plus ?

Merci Vallyan pour le support ;)

Réponses :
1/ Oui c'est la mise à jour en disable des autres options qui ne fonctionnent pas
2/ Dans les deux cas
3/ Ça ne fonctionne pas quand je sélectionne à la main
4/ Pas testé pour l'instant
5/ Quand je fais les tests et que je selectionne une option rien ne passe en disabled dans le code, donc je vais debugger à partir de ça puis je rajouterai la parti pre-selection.

Bon, j'imagine que c'est une connerie du genre selecteur jQuery qui ne marche plus correctement dans le code complet alors que ca marchait avec un code hyper simple.
Bonne chance pour débugger ! Si tu as une verison en ligne de ton site dis moi, je peux essayer de regarder aussi ...

Bon je commence à comprendre pas mal de chose, on est dans un formulaire boostrap donc j'ai des divs controls par select.

Comme tu peux voir dans cette exemple, le disabled ne fonctionne plus.

J'essaye de te faire un codepen le plus proche de mon cas ;)

http://codepen.io/anon/pen/zruao

Merci Vallyan tu dechire ;) avec le setTimeout reactivé et les préselectionnés fonctionne aussi ;)