jQuery Girl
  1. jQuery Girl
  3. Comment puis-je append l’option Tout sélectionner dans jqueryMobile 1.4.2 custom select
Intereting Posts
Pourquoi devez-vous sélectionner à nouveau un élément JQuery dans une collection? Comment désactiver une info-bulle pour un jeu de données spécifique dans ChartJS Passer le tableau de paires nom / valeur au contrôleur sous forme de dictionnaire Exécuter plusieurs effets jQuery sur le même élément en parallèle JQuery: Comment superposer des images? jQgrid: multiselect true – Rend chaque ligne cochée par défaut au chargement de la page JQuery Datepicker to PHP variable sans formulaire JavaScript ne fonctionne pas dans JQuery Load Comment faire en sorte qu’une div remplisse toujours la fenêtre d’affichage (entièrement sensible) avec le contenu qui la suit immédiatement jquery-traversing: select -> option -> text Créer une vidéo en direct d’instantanés jpeg à l’aide de Gstreamer et JavaScript setTimeout () jQuery pour changer le contenu dans div en fonction de la position de défilement Google Map API V3 – Cliquez sur le marqueur pour afficher davantage d’informations, superposées (comme dans Google Maps) Bootstrap Tagsinput avec Typeahead ne fonctionne pas Données JSON non envoyées dans la demande AJAX POST

Comment puis-je append l’option Tout sélectionner dans jqueryMobile 1.4.2 custom select

J’utilise jqueryMobille version 1.4.2 J’ai un menu déroulant avec les jours de la semaine 

  Select All Monday Tuesday Wednesday Thursday Friday Saturday Sunday

Je souhaite append l’option Tout sélectionner qui sélectionne toutes les options de sa sélection. De plus, il convient également d’afficher le comportement de bascule lorsqu’une autre option est désélectionnée. Cependant, lorsque j’ajoute un événement dans la zone de sélection Tout, il ne l’appelle pas car jquery crée une sélection fictive avec toutes les options et les événements ne lui sont pas transférés. Fondamentalement, cela devrait fonctionner comme bootstrap multiselect. http://davidstutz.github.io/bootstrap-multiselect/ J’ai essayé d’intégrer cela également à mon application, mais cela ne fonctionne pas. S’il vous plaît suggérer d’autres alternatives.

Ceci n’est pas fourni dans le widget jQM, mais avec un petit script supplémentaire, vous pouvez obtenir cette fonctionnalité.

Étant donné le balisage sélectionné:

La liste de menus que jQM apparaît est affectée à un identifiant de l’identifiant de sélection + “-menu”. Nous pouvons donc gérer l’événement click des boutons du menu et voir si tout a été sélectionné: 

 var IsSelectAllOperation = false; $(document).on("click", "#selectDays-menu li a", function(){ //was select all clicked (data-option-index="1") var idx = $(this).closest("li").data("option-index"); if (idx == '1') { var IsChecked = $(this).hasClass("ui-checkbox-on"); if (IsChecked){ //select all IsSelectAllOperation = true; $("#selectDays-menu li a").each(function( index ) { var IsHidden = $(this).closest("li").hasClass("ui-screen-hidden"); var NotChecked = $( this ).hasClass("ui-checkbox-off"); if (!IsHidden && NotChecked){ $(this).click(); } }); IsSelectAllOperation = false; } } else { //uncheck the select all option if (!IsSelectAllOperation) { var $selall = $('#selectDays-menu li[data-option-index="1"] a'); if ($selall.hasClass("ui-checkbox-on")){ $selall.click(); } } } });

Nous utilisons la délégation d’événements pour gérer les clics sur n’importe quelle ancre dans le menu de sélection appelé “selectDays-menu”. Ensuite, nous vérifions l’atsortingbut de données appelé option-index sur le LI contenant l’ancre. L’option 0 correspond à l’espace réservé masqué, 1 à l’option Tout sélectionner, les autres sont 2,3,4, etc.

Donc si on clique sur 1, on voit s’il est coché ou décoché. Si cette case est cochée, répétez le rest des options et, si elles ne le sont pas déjà, déclenchez l’événement click sur elles

Si vous cliquez sur une autre option, nous décochons l’option Tout sélectionner.

Voici une démo en marche