Este artigo descreve o método de JavaScript para controlar o movimento para cima e para baixo dos itens em uma caixa de listagem da caixa de listagem. Compartilhe para sua referência. A análise específica é a seguinte:
Esse código JS pode controlar os elementos no ListBox para subir ou descer, o que é muito útil. Abaixo está o código detalhado
A cópia de código é a seguinte: Função listbox_move (listid, direção) {
var listbox = document.getElementById (listID);
var selIndex = listbox.SelectedIndex;
if (-1 == Selindex) {
alerta ("Selecione uma opção para mover");
retornar;
}
var increment = -1;
if (direção == 'up')
incremento = -1;
outro
incremento = 1;
if ((Selindex + incremento) <0 ||
(Selindex + Increment)> (ListBox.Options.Length-1)) {
retornar;
}
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'); // mova a opção selecionada
listbox_move ('countrylist', 'para baixo'); // mova a opção selecionada
Abaixo está um código de demonstração detalhado que pode ser usado no navegador
Copie o código da seguinte forma: Clique em Botões abaixo para selecionar ou desmarcar todas as opções da caixa Selecionar. <br>
<select id = "lsbox" name = "lsbox" size = "10" múltipla = "">
<opção value = "1"> Índia </pption>
<opção value = "2"> Estados Unidos </pption>
<opção value = "3"> China </pption>
<opção value = "4"> Itália </pption>
<opção value = "5"> Alemanha </pption>
<opção value = "6"> Canadá </pption>
<opção value = "7"> França </pption>
<opção value = "8"> Reino Unido </pption>
</select> <br>
<button onclick = "listboxMove ('lsbox', 'up');"> mover up </botão>
<button onclick = "listboxmove ('lsbox', 'down');"> mover para baixo </butut>
<Cript>
função listboxmove (listid, direção) {
var listbox = document.getElementById (listID);
var selIndex = listbox.SelectedIndex;
if (-1 == Selindex) {
alerta ("Selecione uma opção para mover");
retornar;
}
var increment = -1;
if (direção == 'up')
incremento = -1;
outro
incremento = 1;
if ((Selindex + incremento) <0 ||
(Selindex + Increment)> (ListBox.Options.Length-1)) {
retornar;
}
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 artigo seja útil para a programação JavaScript de todos.