Método JavaScript para controlar el movimiento hacia arriba y hacia abajo de los elementos en ListBox ListBox

Este artículo describe el método de JavaScript para controlar el movimiento hacia arriba y hacia abajo de los elementos en un cuadro de lista ListBox. Compártelo para su referencia. El análisis específico es el siguiente:

Este código JS puede controlar los elementos en ListBox para moverse hacia arriba o hacia abajo, lo cual es muy útil. A continuación se muestra el código detallado

La copia del código es la siguiente: funciones listbox_move (listid, dirección) {

var listBox = document.getElementById (listId);

var selindex = listbox.selectedIndex;

if (-1 == selindex) {

alerta ("Seleccione una opción para moverse");

devolver;

}

var increment = -1;

if (dirección == 'arriba')

incremento = -1;

demás

incremento = 1;

if ((selindex + increment) <0 ||

(selindex + increment)> (listbox.options.length-1)) {

devolver;

}

var selvalue = listbox.options [selindex] .value;

var seltext = listbox.options [selindex] .Text;

listbox.options [selindex] .value = listbox.options [selindex + increment] .value

ListBox.options [selindex] .Text = listbox.options [selindex + increment] .Text

ListBox.options [SelIndex + Increment] .Value = SelValue;

listbox.options [selindex + increment] .Text = selText;

ListBox.SelectedIndex = SelIndex + Increment;

}

// ..

// ..

listbox_move ('CountryList', 'Up'); // Sube la opción seleccionada

listbox_move ('CountryList', 'Down'); // Mueve hacia abajo la opción seleccionada

A continuación se muestra un código de demostración detallado que se puede usar en el navegador

Copie el código de la siguiente manera: haga clic en los botones de abajo para seleccionar o anular todas las opciones del cuadro Seleccionar. <br>

<select id = "lsbox" name = "lsbox" size = "10" múltiple = "">

<opción valor = "1"> India </opción>

<opción valor = "2"> Estados Unidos </opción>

<opción valor = "3"> China </opción>

<opción valor = "4"> Italia </ppection>

<opción valor = "5"> Alemania </opción>

<opción valor = "6"> Canadá </opción>

<option value = "7"> France </ppection>

<opción valor = "8"> Reino Unido </opción>

</select> <br>

<Button onClick = "ListBoxMove ('LSBOX', 'UP');"> Mueve UP </boton>

<Button onClick = "ListBoxMove ('Lsbox', 'Down');"> Mover hacia abajo </boton>

<script>

funciones listboxMove (listId, dirección) {

var listBox = document.getElementById (listId);

var selindex = listbox.selectedIndex;

if (-1 == selindex) {

alerta ("Seleccione una opción para moverse");

devolver;

}

var increment = -1;

if (dirección == 'arriba')

incremento = -1;

demás

incremento = 1;

if ((selindex + increment) <0 ||

(selindex + increment)> (listbox.options.length-1)) {

devolver;

}

var selvalue = listbox.options [selindex] .value;

var seltext = listbox.options [selindex] .Text;

listbox.options [selindex] .value = listbox.options [selindex + increment] .value

ListBox.options [selindex] .Text = listbox.options [selindex + increment] .Text

ListBox.options [SelIndex + Increment] .Value = SelValue;

listbox.options [selindex + increment] .Text = selText;

ListBox.SelectedIndex = SelIndex + Increment;

}

</script>

Espero que este artículo sea útil para la programación de JavaScript de todos.