Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

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>
Source by www.w3.org #
 
PREVIOUS NEXT
Tagged: #js #multi #section #listbox
ADD COMMENT
Topic
Name
4+7 =