Discussion :

[Yakasan]

Bonjour,

Je travaille sur une application angularJs avec materialize comme framework css

J'ai sur une de mes views un select-multiple et je souhaiterais rajouter une option permettant de sélectionner toutes les options suivantes et désélectionner tout si re-clic.

View:

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 <select class="col s2 mySelectServices" id="mySelectServices" name="mySelectServices" multiple="multiple"
                    ng-model="filter_selection_services"
                    ng-options="filter as (filter.name ) for filter in filterService" ng-change="changedFilter()">
                <option value="" disabled selected>Filtre par Services</option>
            </select>
.....
<script type="text/javascript">
    $(document).ready(function () {
        $('select').material_select();
    });
    $(function () {
        var check_all = $('#toggle_all_services');
        check_all.on('click', function () {
            var div = $(this).parents('.row').find('.mySelectServices');
            var ul = div.find('ul');
            var li = ul.find('li:not(".disabled")');
            $(li).each(function () {
                if (!$(this).hasClass("active")) {
                    $(this).trigger('click');
                    $(this).addClass("active");
                    $(this).addClass("selected");
                }
 
                $(this).removeClass("active");
                $(this).removeClass("selected");
 
            });
        });
        $('select').material_select();
    });
    $(function () {
        var check_all = $('#toggle_all_status');
        check_all.on('click', function () {
            var div = $(this).parents('.row').find('.mySelectStatus');
            var ul = div.find('ul');
            var li = ul.find('li:not(".disabled")');
            $(li).each(function () {
                if (!$(this).hasClass("active")) {
                    $(this).trigger('click');
                    $(this).addClass("active");
                    $(this).addClass("selected");
                }
 
                $(this).removeClass("active");
                $(this).removeClass("selected");
 
            });
        });
        $('select').material_select();
    });
</script>

Apres de nombreuses tentatives je n'arrive qu'a le faire fonctionner dans un bouton .

Quelqu'un aurait il un lien, une piste, une explication .....?
Merci de votre aide !!

[Kennel sébastien]

Bonjour Yakasan,

Pour un select l'événement est « change » au lieu de « click »

[Yakasan]

Merci je vais peut être poser une question bête mais il fait que je rajoute une option et que je change clic par change ?

[SpaceFrog]

https://jsfiddle.net/63e0vbhw/

[Yakasan]

@spaceFrog merci mais ta solution ne répond pas du tout a la question car c'est un bouton tout selectionné que tu me propose et j'en ai deja fait un qui fonctionne bien

[SpaceFrog]

rajouter une option permettant de sélectionner toutes les options suivantes et désélectionner tout si re-clic.

Heu
j'avoue qu'ergonomiquement je ne vois pas le truc ...

Tu veux dire une case a cocher
lorsque cochée ça fait quoi ?

[Yakasan]

Bonjour,

Afin d'être plus comprehensible je te met visuellement comment ca doit apparaître :



Actuellement j'ai une case a cocher sous mon select multiple (exemple sur la gauche avec les status) qui coche ou décoche toutes les lignes comme par exemple service 1 /service 2 /service 3 .
Je souhaiterais faire en sorte que cette case tout les services par exemple soit positionnée entre la ligne filtre par service et service 1 (cote droit de l'image ) .

Est ce que j'ai été assez clair désolé c'est mon premier post sur le forum

Merci