Multiselect

Default .e-multiselect

AVAILABLE FIELDS
<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select name="multiselect1" multiple class="e-multiselect__select">
      <option value="1">
        Elit dolor 
      </option>
      <option value="2">
        Commodo dolore 
      </option>
      <option value="3">
        Ut nisi 
      </option>
      <option value="4">
        Velit culpa 
      </option>
      <option value="5">
        Minim ut 
      </option>
      <option value="6">
        Dolore magna 
      </option>
      <option value="7">
        Nostrud dolor 
      </option>
      <option value="8">
        Nisi do 
      </option>
      <option value="9">
        Dolore dolore 
      </option>
      <option value="10">
        Nulla nulla 
      </option>
    </select>
  </div>
</div>

                        <div class="e-multiselect">
                          <div class="e-multiselect__item">
                            <div class="e-multiselect__item__title">AVAILABLE FIELDS</div>
                            <select name="multiselect1" multiple="" class="e-multiselect__select">
                              <option value="1">Velit aliquip 
                              </option>
                              <option value="2">Deserunt culpa 
                              </option>
                              <option value="3">Magna incididunt 
                              </option>
                              <option value="4">Laborum excepteur 
                              </option>
                              <option value="5">Voluptate veniam 
                              </option>
                              <option value="6">Irure laborum 
                              </option>
                              <option value="7">Consequat eiusmod 
                              </option>
                              <option value="8">Exercitation ipsum 
                              </option>
                              <option value="9">Nostrud sint 
                              </option>
                              <option value="10">Esse irure 
                              </option>
                            </select>
                          </div>
                        </div>

Variations

Limited size .e-multiselect-large

AVAILABLE FIELDS
<div class="e-multiselect e-multiselect-large">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select name="multiselect2" multiple class="e-multiselect__select">
      <option value="1">
        Qui sint 
      </option>
      <option value="2">
        Magna dolor 
      </option>
      <option value="3">
        Labore cillum 
      </option>
      <option value="4">
        Dolore cupidatat 
      </option>
      <option value="5">
        Voluptate dolor 
      </option>
      <option value="6">
        Fugiat officia 
      </option>
      <option value="7">
        Cillum aliquip 
      </option>
      <option value="8">
        Incididunt esse 
      </option>
      <option value="9">
        Adipiscing magna 
      </option>
      <option value="10">
        Et sint 
      </option>
    </select>
  </div>
</div>

                          <div class="e-multiselect e-multiselect-large">
                            <div class="e-multiselect__item">
                              <div class="e-multiselect__item__title">AVAILABLE FIELDS</div>
                              <select name="multiselect2" multiple="" class="e-multiselect__select">
                                <option value="1">Laboris excepteur 
                                </option>
                                <option value="2">Ad duis 
                                </option>
                                <option value="3">Veniam cillum 
                                </option>
                                <option value="4">Cupidatat do 
                                </option>
                                <option value="5">Anim eu 
                                </option>
                                <option value="6">Ut velit 
                                </option>
                                <option value="7">Excepteur occaecat 
                                </option>
                                <option value="8">Lorem consectetur 
                                </option>
                                <option value="9">Sunt in 
                                </option>
                                <option value="10">Dolor dolor 
                                </option>
                              </select>
                            </div>
                          </div>

Double

AVAILABLE FIELDS
FIELDS FOR THE EXPORT
<div class="e-multiselect">
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      AVAILABLE FIELDS
    </div>
    <select name="multiselect2" multiple class="e-multiselect__select">
      <option value="1">
        Occaecat enim 
      </option>
      <option value="2">
        Do enim 
      </option>
      <option value="3">
        Et ut 
      </option>
      <option value="4">
        Proident dolore 
      </option>
      <option value="5">
        Cupidatat fugiat 
      </option>
      <option value="6">
        Ad dolor 
      </option>
      <option value="7">
        Est ipsum 
      </option>
      <option value="8">
        Sint sed 
      </option>
      <option value="9">
        Sint irure 
      </option>
      <option value="10">
        Occaecat cupidatat 
      </option>
    </select>
  </div>
  <div class="e-multiselect__buttons">
    <div onclick="MoveRight()" class="e-btn e-btn-onlyicon">
      <e-icon icon="angle-double-right"></e-icon>
    </div>
    <div onclick="MoveLeft()" class="e-btn e-btn-onlyicon">
      <e-icon icon="angle-double-left"></e-icon>
    </div>
  </div>
  <div class="e-multiselect__item">
    <div class="e-multiselect__item__title">
      FIELDS FOR THE EXPORT
    </div>
    <select id="chosen_elements" name="chosen_elements" multiple class="e-multiselect__select">
      <option value="1">
        Ad ea 
      </option>
      <option value="2">
        Ad ut 
      </option>
      <option value="3">
        Magna enim 
      </option>
      <option value="4">
        Ad elit 
      </option>
      <option value="5">
        Ut do 
      </option>
    </select>
  </div>
</div>

                          <div class="e-multiselect">
                            <div class="e-multiselect__item">
                              <div class="e-multiselect__item__title">AVAILABLE FIELDS</div>
                              <select name="multiselect2" multiple="" class="e-multiselect__select">
                                <option value="1">Esse nostrud 
                                </option>
                                <option value="2">Non irure 
                                </option>
                                <option value="3">Proident aliquip 
                                </option>
                                <option value="4">Sed consectetur 
                                </option>
                                <option value="5">Ullamco nisi 
                                </option>
                                <option value="6">Exercitation commodo 
                                </option>
                                <option value="7">Nisi commodo 
                                </option>
                                <option value="8">Ad sit 
                                </option>
                                <option value="9">Officia id 
                                </option>
                                <option value="10">Fugiat dolor 
                                </option>
                              </select>
                            </div>
                            <div class="e-multiselect__buttons">
                              <div onclick="MoveRight()" class="e-btn e-btn-onlyicon">
                                <e-icon icon="angle-double-right"></e-icon>
                              </div>
                              <div onclick="MoveLeft()" class="e-btn e-btn-onlyicon">
                                <e-icon icon="angle-double-left"></e-icon>
                              </div>
                            </div>
                            <div class="e-multiselect__item">
                              <div class="e-multiselect__item__title">FIELDS FOR THE EXPORT</div>
                              <select id="chosen_elements" name="chosen_elements" multiple="" class="e-multiselect__select">
                                <option value="1">Deserunt fugiat 
                                </option>
                                <option value="2">In reprehenderit 
                                </option>
                                <option value="3">Aliquip reprehenderit 
                                </option>
                                <option value="4">Minim aliquip 
                                </option>
                                <option value="5">Consectetur est 
                                </option>
                              </select>
                            </div>
                          </div>

Related components

Select

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history