Saltar al contenido

ejemplo de código javascript de cuadro de lista de selección múltiple html

Hola, encontramos la solución a tu búsqueda, desplázate y la hallarás a continuación.

Ejemplo 1: cuadro de lista de varias secciones de js

<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">ImportantFeatures:</span><ul id="ss_imp_list"        tabindex="0"        role="listbox"        aria-labelledby="ss_imp_l"><li id="ss_opt1" role="option">ProximityofpublicK-12 schools      </li><li id="ss_opt2" role="option">Proximityof child-friendly parks      </li><li id="ss_opt3" role="option">Proximityof grocery shopping      </li><li id="ss_opt4" role="option">Proximityof fast food      </li><li id="ss_opt5" role="option">Proximityof fine dining      </li><li id="ss_opt6" role="option">Neighborhood walkability      </li><li id="ss_opt7" role="option">Availabilityofpublic transit      </li><li id="ss_opt8" role="option">Proximityof hospital and medical services      </li><li id="ss_opt9" role="option">Levelof 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">NotImportant</button></div></div><div class="right-area"><span id="ss_unimp_l">UnimportantFeatures:</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>

Ejemplo 2: cuadro de lista de varias secciones de js

<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>

Sección de Reseñas y Valoraciones

Si te gustó nuestro trabajo, puedes dejar un ensayo acerca de qué te ha gustado de este enunciado.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *