Multiple choix en jquery

Multiple choix en jquery Menus déroulant multiple choix » Forum - Bureautique Listes multiples choix multiples et synthèse » Forum - Excel Multiples choix de drivers, que dois je desinstaller ou pas ? » Forum - Carte graphique [Excel] Liste de choix multiple » Forum - Excel Liste de choix multiple sous excel (Résolu) » Forum - Excel

Bonjour, j vais essayer d'être claire

j'ai ce script en jquery, mais vous allez me dire c'est trop bordel et trop long etc..

c'est pour celà, je viens vous voir si quelqu'un peut m'aidé à refaire un code très simple

voila le code jquery

// JavaScript Document  //Toggle de la liste var obj, selectVal = {},index_parent, strings = {}, target; $(".multiple-choix").on("click", ".hida1", function() {     $(".mutliSelect1 ul").not($(".mutliSelect1 ul", $(this).parent())).slideUp('500');     $(".mutliSelect1 ul", $(this).parent()).slideToggle('500');     target = $(this).parent();   })   //Reporter valeur directement après on "click"   .on("change", "input[type='checkbox']", function() {     //index_parent = $(this).parents("dl").index(".multiple-choix");     obj = $(this).parents('.multiple-choix').find(".hida1 span"); 			var iterator = parseInt($(this).parents("dl").index(".multiple-choix"));               if(strings[iterator]==undefined) 			strings[iterator] = {};     if(selectVal[iterator]==undefined)     	selectVal[iterator] = "";           $(this).each(function() {      //pour chaque checkbox dont la valeur est true       if ($(this).is(':checked')) {  				strings[iterator][$(this).val()] = $(this).val();       }else{       	delete(strings[iterator][$(this).val()]);       } 			        if(selectVal[iterator]=="")     		selectVal[iterator] = obj.text();             	var default_text = selectVal[iterator];       if(Object.keys(strings[iterator]).length < 1){       	strings[iterator][default_text] = default_text;       }else{       	delete(strings[iterator][default_text]);       }              var result = joinObj(sortObj(strings[iterator]),", ");       var optionnal_panel = target.find("p.choix-membre");       var optionnal_panel2 = $("p.choix-membre[data-for-select=\"" + default_text + "\"");       if(optionnal_panel.length){       	obj.text(default_text);         optionnal_panel.text(result);      	}else if(optionnal_panel2.length){       	obj.text(default_text);         optionnal_panel2.text(result);       }else       	obj.text(result);       /*console.log(" index_parent :" + index_parent + " nodeName :" + obj.get(0).nodeName + " selectVal :" + selectVal);*/  $(this).parents('.multiple-choix').trigger("value_changed",[result]);     });  		  		   });         $(".choix").each(function() {   	var li = $(this).find("li");     var name = $(this).data("name");     li.each(function(){     	$(this).css("cursor","pointer");       $(this).prepend("<input type=\"checkbox\" name=\""+name+"\" value=\""+$(this).text()+"\" style=\"display:none;\" />");     });   });   $(".choix").on("click", ".hida1", function() {      $(".mutliSelect1 ul").not($(".mutliSelect1 ul", $(this).parent())).slideUp('500');     $(".mutliSelect1 ul", $(this).parent()).slideToggle('500');     target = $(this).parent();   })    $('.choix').on("click","li", function(){   console.log("j");   	  var name = $(this).parents('.choix').data("name");       var val = $(this).text();       var hida = $(this).parents('.choix').find(".hida1");      	var checkbox = $(this).find("input[name=\""+name+"\"][value=\""+val+"\"][type=checkbox]");       console.log(checkbox);       hida.text(val);              $(this).find("input[type=checkbox]").each(function(){       	$(this).prop("checked",false);       });              checkbox.prop("checked",true);       hida.trigger("click");   });    $(".multiple-choix").on("value_changed",function(e,value){ 	$(".choix-membre").text(value); });     function joinObj(a, delemiter) {   var out = [];    for(var key in a){   	out.push(a[key]);   }   return out.join(delemiter); }  function sortObj(obj) {     "use strict";      function Obj2Array(obj) {         var newObj = [];         for (var key in obj) {             if (!obj.hasOwnProperty(key)) return;             var value = [key, obj[key]];             newObj.push(value);         }         return newObj;     }      var sortedArray = Obj2Array(obj).sort(function(a, b) {         if (a[1] < b[1]) return -1;         if (a[1] > b[1]) return 1;         return 0;     });       function recreateSortedObject(targ) {         var sortedObj = {};         for (var i = 0; i < targ.length; i++) {             sortedObj[targ[i][0]] = targ[i][1];         }         return sortedObj;     }     return recreateSortedObject(sortedArray); }	 



	  <div class="global-select-normal choix select1"> 	  <span class="hida1 icon-select">choisit un chiffre</span> 	  <nav class="mutliSelect1"><ul> 	  <li>1</li> 	  <li>2</li> 	  <li>3</li> 	  <li>4</li> 	  <li>5</li> 	  </nav></div></div> 


je vous donne une explication

le code html qui fonctionne très bien et ca consiste si on choisis par exemple le chiffre 4 le chiffre se met automatiquement
<span class="hida1 icon-select">choisit un chiffre</span>



ensuite j'aimerais bien avec le même code html

	  <div class="global-select-normal choix select1"> 	  <span class="hida1 icon-select">choisit un chiffre</span> 	  <nav class="mutliSelect1"><ul> 	  <li>1</li> 	  <li>2</li> 	  <li>3</li> 	  <li>4</li> 	  <li>5</li> 	  </nav></div></div> 



c'est qu'on puisse cliquer sur 2 et 3 et qu'il se mette une couleur pour dire qu'on choisit

par exemple si on choisit le chiffre 1 et 3

ça donnera comme ça

	  <div class="global-select-normal choix select1"> 	  <span class="hida1 icon-select">1, 3</span> 	  <nav class="mutliSelect1"><ul> 	  <li class="couleurchoisit>1</li> 	  <li>2</li> 	  <li class="couleurchoisit>3</li> 	  <li>4</li> 	  <li>5</li> 	  </nav></div></div> 


si quelqu'un peut m'aidé merci de votre aide

Forum

Multiple choix en jquery Menus déroulant multiple choix » Forum - Bureautique Listes multiples choix multiples et synthèse » Forum - Excel Multiples choix de drivers, que dois je desinstaller ou pas ? » Forum - Carte graphique [Excel] Liste de choix multiple » Forum - Excel Liste de choix multiple sous excel (Résolu) » Forum - Excel

Web: www.shapebootstrap.net

1 réponse

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

Bonjour,

On ne va pas réinventer la roue. Il existe des librairies pour ce que tu cherches.
https://silviomoreto.github.io/bootstrap-select/examples/

A toi ensuite de modifier le style en fonction du résultat que tu attends.

Cdt.

Reply

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed