Este artigo descreve o método de JavaScript controlando duas caixas de listagem para trocar dados à esquerda e à direita. Compartilhe para sua referência. A análise específica é a seguinte:
Muitas vezes, usamos essa função, que pode mover todos os elementos da caixa de listagem esquerda para a direita ou mover todos os elementos da caixa de listagem direita para a esquerda ou mover todos os elementos da caixa de listagem direita para a esquerda ou movê -los de uma só vez.
A cópia do código é a seguinte: Função 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) {
var option = src.options [count];
var newOption = document.createElement ("option");
newOption.value = option.value;
newOption.Text = Option.Text;
newOption.Selected = true;
tentar {
dest.add (NewOption, nulo); //Padrão
src.remove (contagem, nulo);
} catch (erro) {
dest.add (NewOption); // ou seja, apenas
src.remove (contagem);
}
contar--;
}
}
}
// ..
listbox_movecross ('countrylist', 'selectedCountryList');
Abaixo está um código de efeito de demonstração que pode ser executado diretamente no navegador
Copie o código da seguinte forma: Clique abaixo os botões para mover as opções selecionadas para a direita ou esquerda.
<tabela>
<Tbody> <tr>
<Td>
<select id = "fontesselect" size = "10" múltiplo = "">
<opção value = "A"> Afeganistão </pption>
<opção value = "b"> Bahamas </pption>
<opção value = "c"> barbados </pption>
<opção value = "d"> bélgica </pption>
<opção value = "e"> butão </pption>
<opção value = "f"> China </pption>
<opção value = "g"> croácia </pption>
<opção value = "h"> Dinamarca </pption>
<opção value = "i"> França </pption>
</leclect>
</td>
<Td>
<button onclick = "listboxmovecross ('fontesselect', 'Destselect');" >>>> </botão> <br>
<button onclick = "listboxmovecross ('destrelect', 'fontesselect');"> <<</button>
</td>
<Td>
<select id = "DestSelect" size = "10" múltiplo = "">
<opção value = "A"> Afeganistão </pption>
<opção value = "b"> Bahamas </pption>
<opção value = "c"> barbados </pption>
<opção value = "d"> bélgica </pption>
<opção value = "e"> butão </pption>
<opção value = "f"> China </pption>
<opção value = "g"> croácia </pption>
<opção value = "h"> Dinamarca </pption>
<opção value = "i"> França </pption>
</leclect>
</td>
</tr>
</tbody> </ table>
<Cript>
Função 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) {
var option = src.options [count];
var newOption = document.createElement ("option");
newOption.value = option.value;
newOption.Text = Option.Text;
newOption.Selected = true;
tentar {
dest.add (NewOption, nulo); //Padrão
src.remove (contagem, nulo);
} catch (erro) {
dest.add (NewOption); // ou seja, apenas
src.remove (contagem);
}
contar--;
}
}
}
</script>
Espero que este artigo seja útil para a programação JavaScript de todos.