javascript listbox example

Example 1: js multi section listbox

<p>  Rank features important to you when choosing where to live. If a feature is unimportant, move it to the unimportant features list.</p><div class="listbox-area">  <div class="left-area">    <span id="ss_imp_l">      Important Features:    </span>    <ul id="ss_imp_list"        tabindex="0"        role="listbox"        aria-labelledby="ss_imp_l">      <li id="ss_opt1" role="option">        Proximity of public K-12 schools      </li>      <li id="ss_opt2" role="option">        Proximity of child-friendly parks      </li>      <li id="ss_opt3" role="option">        Proximity of grocery shopping      </li>      <li id="ss_opt4" role="option">        Proximity of fast food      </li>      <li id="ss_opt5" role="option">        Proximity of fine dining      </li>      <li id="ss_opt6" role="option">        Neighborhood walkability      </li>      <li id="ss_opt7" role="option">        Availability of public transit      </li>      <li id="ss_opt8" role="option">        Proximity of hospital and medical services      </li>      <li id="ss_opt9" role="option">        Level of traffic noise      </li>      <li id="ss_opt10" role="option">        Access to major highways      </li>    </ul>    <div role="toolbar"         aria-label="Actions"         class="toolbar">      <button id="ex1-up"              class="toolbar-item selected"              aria-keyshortcuts="Alt+ArrowUp"              aria-disabled="true">        Up      </button>      <button id="ex1-down"              class="toolbar-item"              tabindex="-1"              aria-keyshortcuts="Alt+ArrowDown"              aria-disabled="true">        Down      </button>      <button id="ex1-delete"              class="toolbar-item move-right-btn"              tabindex="-1"              aria-keyshortcuts="Alt+ArrowRight Delete"              aria-disabled="true">        Not Important      </button>    </div>  </div>  <div class="right-area">    <span id="ss_unimp_l">      Unimportant Features:    </span>    <ul id="ss_unimp_list"        tabindex="0"        role="listbox"        aria-labelledby="ss_unimp_l"        aria-activedescendant="">    </ul>    <button id="ex1-add"            class="move-left-btn"            aria-keyshortcuts="Alt+ArrowLeft Enter"            aria-disabled="true">      Important    </button>  </div>  <div class="offscreen">    Last change:    <span aria-live="polite" id="ss_live_region"></span>  </div></div>

Example 2: js multi section listbox

<p>  Choose upgrades for your transport capsule.</p><div class="listbox-area">  <div class="left-area">    <span id="ms_av_l">      Available upgrades:    </span>    <ul id="ms_imp_list"        tabindex="0"        role="listbox"        aria-labelledby="ms_av_l"        aria-multiselectable="true">      <li id="ms_opt1"          role="option"          aria-selected="false">        Leather seats      </li>      <li id="ms_opt2"          role="option"          aria-selected="false">        Front seat warmers      </li>      <li id="ms_opt3"          role="option"          aria-selected="false">        Rear bucket seats      </li>      <li id="ms_opt4"          role="option"          aria-selected="false">        Rear seat warmers      </li>      <li id="ms_opt5"          role="option"          aria-selected="false">        Front sun roof      </li>      <li id="ms_opt6"          role="option"          aria-selected="false">        Rear sun roof      </li>      <li id="ms_opt7"          role="option"          aria-selected="false">        Privacy cloque      </li>      <li id="ms_opt8"          role="option"          aria-selected="false">        Food synthesizer      </li>      <li id="ms_opt9"          role="option"          aria-selected="false">        Advanced waste recycling system      </li>      <li id="ms_opt10"          role="option"          aria-selected="false">        Turbo vertical take-off capability      </li>    </ul>    <button id="ex2-add"            class="move-right-btn"            aria-keyshortcuts="Alt+ArrowRight Enter"            aria-disabled="true">      Add    </button>  </div>  <div class="right-area">    <span id="ms_ch_l">      Upgrades you have chosen:    </span>    <ul id="ms_unimp_list"        tabindex="0"        role="listbox"        aria-labelledby="ms_ch_l"        aria-activedescendant=""        aria-multiselectable="true">    </ul>    <button id="ex2-delete"            class="move-left-btn"            aria-keyshortcuts="Alt+ArrowLeft Delete"            aria-disabled="true">      Remove    </button>  </div>  <div class="offscreen">    Last change:    <span aria-live="polite" id="ms_live_region"></span>  </div></div>