Skip to main content

Select

Il classico “menu a tendina”, in nuove varianti.

Il plugin Javascript per costruire la select nelle sue varianti è basato su una libreria di terze parti, Bootstrap Select. Nella pagina ufficiale del progetto, è possibile consultare documentazione aggiuntiva sul plugin.

Select classica

La select è composta dal un wrapper esterno .bootstrap-select-wrapper seguita dalla label e dall’elemento select. Includendo la Select in questo modo, essa assumerà una serie di funzionalità descritte di seguito.

<div class="bootstrap-select-wrapper">
  <label>Etichetta</label>
  <select title="Scegli una opzione">
    <option value="Value 1">Opzione 1</option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>

Non utilizzando questa struttura di elementi, la select viene mostrata come prevede il sistema operativo, senza modifiche:

<select title="Scegli una opzione">
  <option value="Value 1">Opzione 1</option>
  <option value="Value 2">Opzione 2</option>
  <option value="Value 3">Opzione 3</option>
  <option value="Value 4">Opzione 4</option>
  <option value="Value 5">Opzione 5</option>
</select>

Select disabilitata

Per disabilitare una select, aggiungere la classe .disabled a .bootstrap-select-wrapper e aggiungere l’attributo disabled al tag <select> per disabilitare le funzionalità.

<div class="bootstrap-select-wrapper disabled">
  <label>Etichetta</label>
  <select disabled title="Scegli una opzione">
    <option value="Value 1">Opzione 1</option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>

Select con reset

Per creare l’opzione che resetterà i valori selezionati andremo ad inserire nella option desiserata, all’interno dell’attributo “data-content” il seguente html: "Label del tasto reset <span class='reset-label'></span>"

All’interno dell’attributo title dell’opzione inseriremo il titolo di default della select, in questo caso "Scegli una opzione".

<div class="bootstrap-select-wrapper">
  <label>Etichetta</label>
  <select title="Scegli una opzione">
    <option value="" title="Scegli una opzione" data-content="Annulla <span class='reset-label'></span>"></option>
    <option value="Value 2">Opzione 2</option>
    <option value="Value 3">Opzione 3</option>
    <option value="Value 4">Opzione 4</option>
    <option value="Value 5">Opzione 5</option>
  </select>
</div>

Select con ricerca

Per attivare la ricerca è sufficiente aggiungere il parametro data-live-search="true" al tag <select> ed il relativo placeholder data-live-search-placeholder="qui il placeholder..."

<div class="bootstrap-select-wrapper">
  <label>Etichetta</label>
  <select title="Scegli una opzione" data-live-search="true" data-live-search-placeholder="Cerca opzioni">
    <option value="1">Lorem ipsum dolor sit amet</option>
    <option value="2">Duis vestibulum eleifend libero</option>
    <option value="3">Phasellus pretium orci sed odio tempus</option>
    <option value="4">Vestibulum bibendum ex vel augue porttitor sodales</option>
    <option value="5">Praesent quis elementum turpis</option>
  </select>
</div>

Select Multipla

Per attivare la multiselezione, aggiungere gli attributi multiple="true" e data-multiple-separator="" alla select.

Nelle option inseriremo per l’attributo data-content il seguente HTML, che servirà a renderizzare con il corretto stile le opzioni selezionate. "<span class='select-pill'><span class='select-pill-text'>label option</span></span>"

<div class="bootstrap-select-wrapper">
  <label>Etichetta</label>
  <select title="Scegli una opzione" multiple="true" data-multiple-separator="">
    <option value="1" data-content="<span class='select-pill'><span class='select-pill-text'>Opzione 1</span></span>"></option>
    <option value="2" data-content="<span class='select-pill'><span class='select-pill-text'>Opzione 2</span></span>"></option>
    <option value="3" data-content="<span class='select-pill'><span class='select-pill-text'>Opzione 3</span></span>"></option>
    <option value="4" data-content="<span class='select-pill'><span class='select-pill-text'>Opzione 4</span></span>"></option>
  </select>
</div>

Select con gruppi

Per le select con raggruppamenti utilizzare il tag HTML <optgroup> per raggruppare le <option>.

<div class="bootstrap-select-wrapper">
  <label>Etichetta</label>
  <select title="Scegli una opzione">
    <optgroup label="Gruppo 1">
      <option value="1">Opzione 1</option>
      <option value="2">Opzione 2</option>
    </optgroup>
    <optgroup label="Gruppo 2">
      <option value="3">Opzione 3</option>
      <option value="4">Opzione 4</option>
    </optgroup>
  </select>
</div>

Modifica dinamica del campi della select

Dal momento che il plugin viene attivato al caricamento del documento mentre a volte può essere necessario attendere, viene messa a disposizione una funzione $.setOptionsToSelect(_parametro) che permette di riscrivere le opzioni della select, ad esempio nel caso vengano caricate successivamente. La funzione dev’essere chiamata dall’elemento con classe .bootstrap-select-wrapper, e con parametro in input _parametro un oggetto Javascript con proprietà “value” e “text” come segue:

$(document).ready(function() {
    $('.bootstrap-select-wrapper.my-select-wrapper').setOptionsToSelect([{
      text: 'push Label 1',
      value: 'pushValue 1'
    },{
      text: 'push Label 2',
      value: 'pushValue 2'
    },{
      text: 'push Label 3',
      value: 'pushValue 3'
    }]);
  });

Questo sito utilizza cookie tecnici, analytics e di terze parti.
Proseguendo nella navigazione accetti l’utilizzo dei cookie.

Privacy policy