Cómo: Pasar valores entre varios cuadros de selección

Exención de responsabilidades de contenido KB retirado

Este artículo se refiere a productos para los que Microsoft ya no ofrece soporte técnico. Por tanto, el presente artículo se ofrece "tal cual" y no será actualizado.

Resumen

En este artículo paso a paso se muestra cómo mover elementos de un cuadro de selección para seleccionar otro cuadro en un formulario de lenguaje de marcado de hipertexto (HTML). Puede escribir código de Microsoft JScript para quitar todos los elementos seleccionados de un cuadro de selección y agregar los elementos seleccionados a otro cuadro de selección.

Requisitos

La lista siguiente describe el hardware recomendado, software, infraestructura de red y service packs que se necesitan:
  • Internet Explorer 5.01 o posterior
En este artículo se supone que está familiarizado con los temas siguientes:
  • HTML
  • JScript

Crear varios cuadros de selección y agregue el código para pasar valores

  1. Abra un editor de texto como el Bloc de notas.
  2. Agregue el siguiente código HTML en el archivo:
    <HTML><HEAD>
    <TITLE>Move Multiple Selections Demo</TITLE>
    </HEAD>
    <BODY>
    <SELECT NAME="possible" SIZE"10" MULTIPLE>
    <OPTION VALUE="New Red Corvette">New Red Corvette</OPTION>
    <OPTION VALUE="Vintage Red Corvette">Vintage Red Corvette</OPTION>
    <OPTION VALUE="Old Red Corvette">Old Red Corvette</OPTION>
    </SELECT>
    <SELECT NAME="wishlist" SIZE="10" MULTIPLE>
    <OPTION VALUE="Old Red Jalopy">Old Red Jalopy</OPTION>
    </SELECT>
    </BODY>
    </HTML>

    Este código crea dos cuadros de selección denominado posible y lista de deseos.

  3. Agregue el código siguiente después de la última < SELECT > etiqueta final y antes de fin de la sección < BODY > etiqueta para agregar dos botones a la página HTML:
    <INPUT TYPE="BUTTON" VALUE="Add to wishlist"       ONCLICK="MyMoveItem(possible,wishlist);">
    <INPUT TYPE="BUTTON" VALUE="Remove from wishlist"
    ONCLICK="MyMoveItem(wishlist,possible);">

    Observe que estos botones llamar a la función MyMoveItem , que mueve los elementos seleccionados de un cuadro de selección a otro cuadro de selección.

  4. Agregue el código siguiente después de la última < SELECT > etiqueta final y antes de fin de la sección < BODY > etiqueta para agregar dos botones a la página HTML:
    <SCRIPT LANGUAGE="JScript">function MyMoveItem(fromObj, toObj)
    {
    for (var selIndex = fromObj.length - 1; selIndex >= 0; selIndex--)
    {
    // Is this option selected?
    if (fromObj.options[selIndex].selected)
    {
    // Get the text and value for this option.
    var newText = fromObj.options[selIndex].text;
    var newValue = fromObj.options[selIndex].value;

    // Create a new option, and add to the other select box.
    var newOption = new Option(newText, newValue)
    toObj[toObj.length] = newOption;

    // Delete the option in the first select box.
    fromObj[selIndex] = null;
    }
    }
    }
    </SCRIPT>

    Este código desplaza cada opción seleccionada de un cuadro de selección en el cuadro de selección. Observe que el código funciona desde el final de la lista al principio de la lista. Esto sucede porque el código elimina elementos mientras se ejecuta. Si el código empieza al principio de la lista, el código pasaría por alto algunos elementos cuando las opciones se mueven para ocupar en los espacios que se crean las eliminaciones.
  5. Guarde el archivo como C:\SelectDemo.htm.

Comprobar que funciona

  1. Inicie Internet Explorer.
  2. En la barra Dirección, escriba C:\SelectDemo.htm .
  3. Compruebe que la página HTML muestra dos cuadros de selección y dos botones.
  4. Seleccione algunas opciones en el primer cuadro de selección y, a continuación, haga clic en Agregar a lista de deseos. Observe que las opciones seleccionadas se eliminan del primer cuadro de selección y, a continuación, se anexan a la segunda casilla.
  5. Seleccione algunas opciones en el cuadro Seleccionar en segundo lugar y, a continuación, haga clic en quitar de la lista de deseos. Observe que las opciones seleccionadas se eliminan de la segunda casilla y, a continuación, se anexan al primer cuadro de selección.

REFERENCIAS

Para obtener información adicional acerca de cómo hacer esto a través de marcos, haga clic en el número de artículo siguiente para verlo en Microsoft Knowledge Base:

237831 PRB: error al agregar la nueva opción para seleccionar el cuadro en otro marco en Internet Explorer 5
Propiedades

Id. de artículo: 315655 - Última revisión: 17 ene. 2017 - Revisión: 1

Comentarios