Script para colocar em um combo somente os valores selecionados de outro (HTML/JavaScript)

August 2nd, 2010

Meison Almeida

Quem está procurando uma forma de preencher dinamicamente outro combo (vazio) a partir de um multi-selecionavel conforme esse vai sendo selecionado, é só pegar esse exemplo de HTML abaixo. Com ele você vai conseguir fazer isso sem muito esforço.

<HTML>
<SCRIPT LANGUAGE=”JavaScript”>
         function selecionados(cmb1, cmb2) {
            var index = 0;
   var intC = 0;
   var intLoop = 0;
   for (intC = cmb2.length-1; intC >= 0; intC– )
   {
    cmb2.remove(intC);
   }
            for (intLoop = 0; intLoop < cmb1.length; intLoop++) {
               if (cmb1[intLoop].selected) {
                  index = cmb2.length;
      cmb2[index] = new Option;
      cmb2[index].value = cmb1[intLoop].value;
      cmb2[index].text = cmb1[intLoop].text;
                  cmb2[index].index = intLoop;
               }
            }
            return;
         }

</SCRIPT>
<BODY>
<form name=”f”>
<select name=”s1″ multiple size=5 onchange=”selecionados(this,document.f.s2)”>
<option value=”1″>opcao1</option>
<option value=”2″>opcao2</option>
<option value=”3″>opcao3</option>
<option value=”4″>opcao4</option>
</select>
<select name=”s2″ size=5 >
</select>
</form>
</BODY>
</HTML>

O que o script faz é, toda vez que o combo que contém os dados é selecionado (na verdade alterado seu valor, ou seja sua seleção) ele chama a função “selecionados” passando o próprio combo e o de destino. A função irá limpar o conteúdo do combo de destino. Fará uma busca no combo original inteiro procurando os selecionados, estes serão copiados para o combo de destino, ficando neste somente os selecionados no primeiro.