Sistema di input per trasferire un elemento testuale da un box al'altro

**American** · 21-07-2014, 13:15

Salve, mi servirebbe sapere come si chiama e che framework esistono per creare questi tipi di input che ho visto in alcuni siti

box.jpg

In pratica data una lista predefinita di elementi elencati nel box di sinistra, è possibile trasferire gli stessi nella box di destra e viceversa.

**KillerWorm** · 24-07-2014, 23:03

Ciao, come si chiama non saprei e non ho idea se esistano sistemi specifici per fare ciò che chiedi ma personalmente risolverei con qualche semplice riga di jQuery/JavaScript.

Ti posto un esempio da cui puoi prendere spunto:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      select{
        width:200px;
        height:200px;
        float:left;
      }
      #pulsanti{
        width:60px;
        height:200px;
        padding-top:30px;
        float:left;
      }
      #pulsanti>input{
        width:40px;
        display:block;
        margin:20px auto;
        text-align:center;
      }
    </style>
    <script type="text/javascript">
      $(function(){
        $("#pulsanti>input").click(function(){
          var sel = [$("select._sx"),$("select._dx")];
          if ($(this).hasClass("_dx")) sel.reverse();
          sel[0].append($("option:selected",sel[1]));
        })
      })
    </script>
  </head>
  <body>
    <select multiple class="_sx">
      <option value="1">Articolo 1</option>
      <option value="2">Articolo 2</option>
      <option value="5">Articolo 5</option>
      <option value="6">Articolo 6</option>
      <option value="8">Articolo 8</option>
    </select>
    <div id="pulsanti">
      <input type="button" class="_dx" value="&gt;&gt;">
      <input type="button" class="_sx" value="&lt;&lt;">
    </div>
    <select multiple class="_dx">
      <option value="3">Articolo 3</option>
      <option value="4">Articolo 4</option>
      <option value="7">Articolo 7</option>
    </select>
  </body>
</html>

Discussione: Sistema di input per trasferire un elemento testuale da un box al'altro

Strumenti discussione

Ricerca discussione

Visualizza

Sistema di input per trasferire un elemento testuale da un box al'altro

Permessi di invio