Casella di scelta multipla HTML

Question

Mi chiedo solo qual è il nome del modulo sottostante? Io stavo facendo ricerche su Google dalla mattina per la lista dei moduli HTML ma non sono riuscito a trovare questo tipo di modulo da nessuna parte. Qualcuno può dirmi il nome esatto di questo modulo ed è disponibile nei moduli HTML?

Voglio solo aggiungere questo tipo di forma nel mio sito. È disponibile per HTML o dovrei usare JavaScript o il suo unico limite per le applicazioni Windows?

Answer 1

Ecco un piccolo esempio per iniziare: http://jsfiddle.net/eUDRV/3/

Questo esempio spostare gli elementi (uno o più) da sinistra a destra e viceversa. Qualunque oggetto (i) sia selezionato nella parte destra aggiornerà la casella di testo sul lato destro.

Usiamo gli elementi:

• select
• input type="button"
• input type="text"

incorniciato da:

• div
• section

abbinare a semplici CSS. La funzionalità è fornita con JavaScript.

Sto usando la libreria jQuery per semplificare le cose. Questo potrebbe anche essere fatto con puro JavaScript.

$("#btnLeft").click(function() { 
 
    var selectedItem = $("#rightValues option:selected"); 
 
    $("#leftValues").append(selectedItem); 
 
}); 
 

 
$("#btnRight").click(function() { 
 
    var selectedItem = $("#leftValues option:selected"); 
 
    $("#rightValues").append(selectedItem); 
 
}); 
 

 
$("#rightValues").change(function() { 
 
    var selectedItem = $("#rightValues option:selected"); 
 
    $("#txtRight").val(selectedItem.text()); 
 
});

SELECT, INPUT[type="text"] { 
 
    width: 160px; 
 
    box-sizing: border-box; 
 
} 
 
SECTION { 
 
    padding: 8px; 
 
    background-color: #f0f0f0; 
 
    overflow: auto; 
 
} 
 
SECTION > DIV { 
 
    float: left; 
 
    padding: 4px; 
 
} 
 
SECTION > DIV + DIV { 
 
    width: 40px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<section class="container"> 
 
    <div> 
 
     <select id="leftValues" size="5" multiple></select> 
 
    </div> 
 
    <div> 
 
     <input type="button" id="btnLeft" value="&lt;&lt;" /> 
 
     <input type="button" id="btnRight" value="&gt;&gt;" /> 
 
    </div> 
 
    <div> 
 
     <select id="rightValues" size="4" multiple> 
 
      <option>1</option> 
 
      <option>2</option> 
 
      <option>3</option> 
 
     </select> 
 
     <div> 
 
      <input type="text" id="txtRight" /> 
 
     </div> 
 
    </div> 
 
</section>

Answer 2

E 'più comunemente indicato come un selezione multipla casella di riepilogo. Ecco un leggero libreria jQuery selezione multipla in loudev.com: