web-dev-qa-db-fra.com

jQuery multiselect menu déroulant

J'ai une simple liste déroulante html multi select:

<select id="transactionType" multiple="multiple" size="10">
  <option value="ALLOC">ALLOC</option>
  <option value="LOAD1">LOAD1</option>
  <option value="LOAD2">LOAD2</option>
  <!-- etcetera... -->
</select>

Je souhaite continuer à utiliser cette liste au cas où javascript serait désactivé, mais javaScript, j'aimerais le rendre sous forme de liste déroulante à sélections multiples. C’est-à-dire qu’il n’affiche qu’un élément de la liste jusqu’à ce que vous cliquiez dessus, puis se développe pour afficher les éléments x et permettre le défilement, ce qui me permet de sélectionner plusieurs éléments comme vous le souhaitez tout en maintenant les touches Maj ou Ctrl enfoncées.

La nouveauté de jQuery était la recherche de http://jquery.com/ mais je n'ai pas encore trouvé ce dont j'avais besoin.

Éditer utilisateurs de Struts2, la réponse sélectionnée encodera l’URL avec [] ceci cause des problèmes dans struts2 mais le correctif est très facile. Ouvrez simplement jquery.multiSelect.js, recherchez "[]" et supprimez l'instance utilisée dans la concaténation de chaînes. J'utilise également jQuery 1.4.4 par opposition à la version 1.3.2 fournie avec elle et tout fonctionne parfaitement.

jqueryjquery-uijquery-pluginsmulti-select
50
Quaternion

Mise à jour (2017): Les deux bibliothèques suivantes sont désormais les bibliothèques de liste déroulante les plus courantes utilisées avec Javascript. Bien qu’ils soient natifs en jQuery, ils ont été personnalisés pour fonctionner avec tout, depuis AngularJS 1.x jusqu’à l’avoir CSS personnalisé pour Bootstrap. (JS choisi, la réponse originale ici, semble avoir chuté à la 3ème popularité.)

Captures d'écran obligatoires ci-dessous.

Sélectionnez2: Select2

Sélectionnez: Selectize

Réponse originale (2012) : Je pense que la bibliothèque choisie pourrait également être utile. Il est disponible dans les versions jQuery, Prototype et MooTools.

Vous trouverez ci-joint une capture d'écran de l'aspect de la fonctionnalité de sélection multiple dans Choisi.

Chosen library

82
Suman

Je recherchais également un système multi-sélections simple pour mon entreprise. Je voulais quelque chose de simple, hautement personnalisable et sans grandes dépendances autres que jQuery.

Je n’en ai trouvé aucun qui corresponde à mes besoins, j’ai donc décidé de coder les miens.
Je l'utilise en production.

Voici quelques démos et documentation: loudev.com

Si vous souhaitez contribuer, consultez le référentiel github

16
lou

  • Télécharger jquery.multiselect

  • Inclure les fichiers jquery.multiselect.js et jquery.multiselect.css

    <script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />

  • Remplissez votre entrée sélectionnée

  • Ajouter le multisélect

    $('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });

  • Vous pouvez changer le style

    ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }

  • Si vous souhaitez repeupler la sélection, vous devez l'actualiser:

    $('#' + Field).multiselect('refresh');

  • Pour obtenir les valeurs sélectionnées (séparées par des virgules):

    var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();

  • Pour effacer toutes les valeurs sélectionnées:

    $('#' + Field).multiselect("uncheckAll");

9
Oranit Dar

Jetez un oeil à menu déroulant erichynds multiselect avec une énorme quantité de réglages et de réglages.

3
sergejsvit

Vous pouvez utiliser selected.i télécharger tous les fichiers à partir de ce lien lien de téléchargement choisi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="prism.css" rel="stylesheet" type="text/css" />
    <link href="chosen.css" rel="stylesheet" type="text/css" />
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="prism.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen();
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<ion-view view-title="Profile">
<ion-content class="padding">

<div>
    <label class="item item-input">
        <div class="input-label">Enter Your Option</div>
            <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;">
                <option value="Option 2.1">Option 2.1</option>
                <option value="Option 2.2">Option 2.2</option>
                <option value="Option 2.3">Option 2.3</option>
            </select>   
    </label>
</div>
</ion-content>
</ion-view> 
    </div>
    </form>
</body>
</html>

Tous les fichiers sur le même dossier

3
syed mhamudul hasan akash

Vous pouvez pirater les vôtres, sans vous fier aux plugins jQuery ... bien que vous deviez garder une trace externe (en JS) des éléments sélectionnés, car la transition supprime les informations d'état sélectionnées:

<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
  <script type='text/javascript'>
    $(window).load(function(){
      $('#transactionType').focusin(function(){
        $('#transactionType').attr('multiple', true);
      });
      $('#transactionType').focusout(function(){
        $('#transactionType').attr('multiple', false);
      });
    });>  
  </script>
</head>
<body>
  <select id="transactionType">
    <option value="ALLOC">ALLOC</option>
    <option value="LOAD1">LOAD1</option>
    <option value="LOAD2">LOAD2</option>
  </select>  
</body>
1
nmz787
<select id="mycontrolId" multiple="multiple">
   <option value="1" >one</option>
   <option value="2" >two</option>
   <option value="3">three</option>
   <option value="4">four</option>
</select>

var data = "1,3,4"; var dataarray = data.split(",");

$("#mycontrolId").val(dataarray);
1
wasay raza

J'ai utilisé jQuery MultiSelect pour implémenter un menu déroulant multisélect avec une case à cocher. Vous pouvez voir le guide de mise en œuvre à partir d'ici - Liste déroulante à sélection multiple avec case à cocher

L'implémentation est très simple, il suffit d'utiliser le code suivant.

$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});
1
JoyGuru

Cherchez-vous à faire quelque chose comme ça http://jsfiddle.net/robert/xhHkG/

$('#transactionType').attr({
    'multiple': true,
    'size' : 10
});

Mettez cela dans un $(function() {...}) ou un autre onload

Modifier

Relisez votre question, vous ne recherchez pas vraiment une sélection multiple ... mais une liste déroulante qui vous permet de sélectionner plusieurs. Ouais, probablement mieux d'utiliser un plugin pour cela ou de l'écrire à partir de la base, ce n'est pas un accord de type "réponse rapide" cependant.

0
Robert