davidbgk
/
larlet-fr-david

<!doctype html>
<html lang=fr>
<head>
  <!-- Always define the charset before the title -->
  <meta charset=utf-8>
  <title>Une solution élégante au select multiple — Biologeek — David Larlet</title>
  <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- Fake favicon, to avoid extra request to the server -->
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  <link rel="manifest" href="/manifest.json">
  
  <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  
  <noscript>
    <style type="text/css">
      /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
      body {
        font-family: 'EquityTextB', serif;
      }
      h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
        font-family: 'EquityCapsB', sans-serif;
        font-variant: normal;
      }
    </style>
  </noscript>
  
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20080810-une-solution-elegante-au-select-multiple">

</head>
<body>
  <div>
    
    <header>
      <nav>
        <p>
          <small>
            Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
          </small>
        </p>
      </nav>
    </header>
    
    
  <section>
    <h1 property="schema:name">Une solution élégante au select multiple</h1>
    <article typeof="schema:BlogPosting">
      <div property="schema:articleBody">
        
        <p>Un <a href="http://www.ryancramer.com/journal/entries/select_multiple/">plugin jQuery</a> permet de sélectionner via une liste déroulante et d'ordonner les résultats :</p>
<p>
    <img 
        src="/static/david/biologeek/images/select_multiple.png" 
        alt="Select multiple avec le plugin jQuery asm" 
        style="margin: 0pt auto; display: block;"/>
</p>

<p>C'est pas encore l'idéal mais ça reste une meilleure solution que celle implémentée par défaut dans les navigateurs, il serait temps de faire évoluer un peu certaines interfaces utilisateurs obsolètes...</p>
<p>Vous avez mieux ?</p>
      </div>
    </article>
    <footer>
      <h6 property="schema:datePublished">— 10/08/2008</h6>
    </footer>
  </section>
  <section>
    <div>
      <h3>Articles peut-être en rapport</h3>
      <ul>
        <li><a href="/david/biologeek/archives/20080808-les-10-meilleurs-geeks-du-web-francais/" title="Accès à Les 10 meilleurs geeks du web français">Les 10 meilleurs geeks du web français</a></li>
        <li><a href="/david/biologeek/archives/20080806-qui-peut-changer-votre-vie/" title="Accès à Qui peut changer votre vie ?">Qui peut changer votre vie ?</a></li>
        <li><a href="/david/biologeek/archives/20080725-notifications-atom-pubsub-xmpp-et-oauth/" title="Accès à Notifications, Atom PubSub, XMPP et OAuth">Notifications, Atom PubSub, XMPP et OAuth</a></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="comments">
      <h3>Commentaires</h3>
      
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Bastien</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Pour ma part j&#39;aurais tendance à dire qu&#39;une solution pas mal est celle Facebook quand on veut partager ou inviter des gens:</p>

<p>On voit toutes les possibilités et on clique sur celle qu&#39;on veut et elles s&#39;highlightent. Le tout accompagné d&#39;une textbox plus haut qui permet de filtrer à la volée les données.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">loïc m.</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>pour moi ça serai d&#39;utiliser des checkbox, mais avec l&#39;inconvénient quand la liste est trop grande...<br />une liste de checkbox dans un div en overflow ?<br />peut-être une piste à suivre.<br />Il me semble que j&#39;avais vus des solutions intéressantes dans ce sens un jour... vas-y pour retrouver le lien maintenant... -_-&quot;</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Bastien : oui, c&#39;est celle que l&#39;on utilise sur mixin pour sélectionner les personnes impliquées dans un évènement. C&#39;est en effet une approche intéressante mais je sais pas si c&#39;est très facile à scanner/comprendre d&#39;un seul coup d&#39;œil.</p>

<p>@loïc m. : <a href="http://www.c82.net/posts.php?id=25">http://www.c82.net/posts.php?id=25</a> ?</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Louis Pontoise</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je suis d&#39;accord avec l&#39;avis général : pour l&#39;instant le mieux reste la liste de checkboxes, avec des filtres si beaucoup de données.</p>

<p>Quant à l&#39;exemple sous JQuery, il serait facilement utilisable sous Mootools, via le plugin Sortable. Démo similaire (il suffit de changer l&#39;entrée des données d&#39;un input à une droplist) :</p>

<p><a href="http://demos.mootools.net/Dynamic.Sortables">http://demos.mootools.net/Dynamic.Sortables</a></p>

<p>PS : on ne peut pas utiliser d&#39;HTML dans les commentaire sur *ce* blog ? o_o</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">zyegfryed</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Il y a aussi la gestion utilisée par l&#39;Admin de Django. Mais je ne sais pas à quel point le code est facilement réutilisable...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Louis Pontoise : J&#39;ai l&#39;impression que le plugin Sortable ne fait pas exactement la même chose mais je ne doute pas que cela puisse être fait avec n&#39;importe quel framework js.</p>

<p>ps : j&#39;ai pas encore trouvé un intérêt suffisant à ajouter cette fonctionnalité.</p>

<p>@zyegfryed : justement je trouve que Django aurait des progrès à faire pour gérer cette interface.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Tutula</span> le <span class="comment-date" property="schema:commentTime">03/05/2009</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Bonjour,</p>

<p>Je cherche à faire un combobox avec des cases multiples à cocher comme sur <a href="http://www.emmobilier.com">http://www.emmobilier.com</a></p>

<p>Quelqu&#39;un peut  il m&#39;aider.</p>

<p>Merci</p>

<p>Frédéric</p>
    </div>
</div>

    </div>
  </section>

    
    <footer>
      <nav>
        <p>
          <small>
            Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
          </small>
        </p>
      </nav>
    </footer>
    
  </div>
  
  <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  
  <script data-no-instant>InstantClick.init()</script>
  
</body>
</html>