Este artículo describe el método de JavaScript que controla dos cuadros de lista para intercambiar datos a la izquierda y a la derecha. Compártelo para su referencia. El análisis específico es el siguiente:
A menudo usamos esta función, que puede mover todos los elementos del cuadro de lista izquierdo hacia la derecha, o mover todos los elementos del cuadro de lista derecho hacia la izquierda, o mover todos los elementos del cuadro de lista derecho hacia la izquierda, o moverlos de inmediato.
La copia del código es la siguiente: funciones listbox_movecross (SourceID, Destid) {
var src = document.getElementById (SourceId);
var dest = document.getElementById (Destid);
for (var count = 0; count <src.options.length; count ++) {
if (src.options [count] .selected == true) {
opción var = src.options [count];
var newoction = document.createElement ("opción");
NewOption.Value = option.Value;
NewOption.Text = option.Text;
NewOption.Selected = True;
intentar {
dest.Add (NewOption, NULL); //Estándar
src.remove (conteo, nulo);
} capt (error) {
dest.Add (NewOption); // es solo
src.remove (cuenta);
}
contar--;
}
}
}
// ..
listbox_movecross ('CountryList', 'SelectedCountryList');
A continuación se muestra un código de efecto de demostración que se puede ejecutar directamente en el navegador
Copie el código de la siguiente manera: haga clic en los botones a continuación para mover las opciones seleccionadas derecha o izquierda. <br>
<Table>
<tbody> <tr>
<TD>
<select id = "SourcesElect" size = "10" múltiple = "">
<opción valor = "a"> Afganistán </ppection>
<opción valor = "b"> bahamas </ppection>
<opción valor = "c"> Barbados </ppection>
<opción valor = "d"> bélgica </ppection>
<opción valor = "e"> bután </ppection>
<opción valor = "f"> China </ppection>
<opción valor = "g"> croacia </ppection>
<opción valor = "h"> dinmark </ppection>
<opción valor = "i"> Francia </opción>
</select>
</td>
<TD>
<Button onClick = "ListBoxMoVecross ('SourcesElect', 'DestSelect');" >>>> </botón> <br>
<Button onClick = "ListBoxMoVecross ('DestSelect', 'SourceSelect');"> <<</Button>
</td>
<TD>
<select id = "destselect" size = "10" múltiple = "">
<opción valor = "a"> Afganistán </ppection>
<opción valor = "b"> bahamas </ppection>
<opción valor = "c"> Barbados </ppection>
<opción valor = "d"> bélgica </ppection>
<opción valor = "e"> bután </ppection>
<opción valor = "f"> China </ppection>
<opción valor = "g"> croacia </ppection>
<opción valor = "h"> dinmark </ppection>
<opción valor = "i"> Francia </opción>
</select>
</td>
</tr>
</tbody> </table>
<script>
funciones listBoxMoVecross (SourceId, Destid) {
var src = document.getElementById (SourceId);
var dest = document.getElementById (Destid);
for (var count = 0; count <src.options.length; count ++) {
if (src.options [count] .selected == true) {
opción var = src.options [count];
var newoction = document.createElement ("opción");
NewOption.Value = option.Value;
NewOption.Text = option.Text;
NewOption.Selected = True;
intentar {
dest.Add (NewOption, NULL); //Estándar
src.remove (conteo, nulo);
} capt (error) {
dest.Add (NewOption); // es solo
src.remove (cuenta);
}
contar--;
}
}
}
</script>
Espero que este artículo sea útil para la programación de JavaScript de todos.