Método JavaScript para controlar o movimento para cima e para baixo dos itens no ListBoxBoxbox

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.