Video: Curso Completo: Macro pronta Userform Caixa de Listagem

Você pode usar o javascript selecionar objeto de uma maneira poderosa para as suas necessidades de programação HTML5 e CSS3. Para tornar o trabalho de seleção múltipla, você tem que fazer algumas alterações, tanto de HTML e o código javascript. Visitar esta página com uma caixa de listagem de seleção múltipla.

Como codificar um seleto objeto seleção múltipla

Você modificar o selecionar código de duas maneiras para fazer várias seleções:

• Indicam várias seleções são permitidos. Por padrão, selecionar caixas têm apenas um valor. Você precisará configurar um switch para dizer ao navegador para permitir que mais de um item a ser selecionado.

• Faça o modo de uma multilinha select. O comportamento drop-down padrão não faz sentido quando você quiser várias seleções, porque o usuário precisa ver todas as opções de uma só vez. A maioria dos navegadores automaticamente mudar para um modo de várias linhas, mas você deve controlar o processo diretamente.

  Video: 29 MD HTML5 Formulários Seleção, Combo

várias seleções

O código não é chocante, mas ele tem algumas características importantes:

• Ligar para selecionar objeto selLanguage. Como é habitual, os elementos de forma precisa um identidade atribuir de modo que você pode lê-lo no javascript.

• Adicione o múltiplo atribuir ao seu objeto. Este atributo diz ao navegador para aceitar várias entradas usando Shift + clique (para seleções contíguas) ou Ctrl + clique (para a seleção mais precisa).

• Colocou o Tamanho a 10. O tamanho indica o número de linhas a ser exibido.

• Faça um botão. Com a seleção múltipla, você provavelmente não vai querer acionar a ação até que o usuário tenha acabado de fazer seleções. Um botão separado é a maneira mais fácil para se certificar de que o código é acionado quando você quer que aconteça.

• Criar um saída div. Este código contém a resposta.

Como escrever o código javascript

O código javascript para leitura de uma caixa de listagem de seleção múltipla é um pouco diferente do que o código de seleção padrão. o valor propriedade geralmente retorna um valor, mas uma caixa de listagem de seleção múltipla, muitas vezes retorna mais de um resultado.

A chave é reconhecer que uma lista de opção objectos dentro de um selecionar objeto é realmente uma espécie de matriz, não apenas um valor. Você pode olhar mais de perto a lista de objetos para ver quais são selecionados, que é essencialmente o que a showChoices () função faz:

Na primeira, o código parece intimidante, mas se você dividi-la, não é muito complicado.

1. Criar uma variável para representar o inteiro selecionar objeto.

   O padrão getElementById () técnica funciona bem.

    var selLanguage = document.getElementById ("selLanguage") -

2. Crie uma variável de cadeia para conter a saída.

   Quando você está construindo saída HTML complexos, trabalhar com uma variável de cadeia é muito mais fácil do que escrever diretamente código para o elemento.

    resultado var = "
   seus Idiomas
   "-

3. 
   
   
   

   Construir uma lista desordenada para exibir os resultados.

   Uma lista não ordenada é uma boa maneira de cuspir os resultados.

    resultado + = "
    n"-

4. Percorrer selLanguage como se fosse uma matriz.

   Use um para loop para examinar a linha de caixa de lista por linha. Observe que selLanguage tem um comprimento propriedade como um array.

    for (i = 0- i lt; selLanguage.length- i ++) {

5. Atribuir o elemento atual a uma variável temporária.

   o currentOption variável contém uma referência a todos opção elemento do objecto original como o ciclo progride.

    currentOption = selLanguage [i] -

6. Verifique se o elemento atual foi selecionada.

   O objeto currentOption tem um selecionado propriedade que indica se o objeto foi destacado pelo usuário. selecionado é uma propriedade booleana, por isso é verdadeiro ou falso.

    if (currentOption.selected == true) {

7. Se o elemento tiver sido seleccionado, adicionar uma entrada à lista de saída.

   Se o usuário tem destacado este objeto, criar uma entrada na lista não ordenada alojado no resultado variável.

    resultado + = "

8. " + + CurrentOption.value "
n"-

9. Fechar a lista.

   Após o ciclo tenha terminado ciclismo através de todos os objetos, você pode fechar a lista não ordenada que você está construindo.

    resultado + = " n"-

10. resultados de impressão para a div.

    o saída dIV innerHTML propriedade é um local perfeito para imprimir a lista não ordenada.

     produção = document.getElementById ("saída") - output.innerHTML = result-

Algo estranho está acontecendo aqui. As opções de uma caixa de seleção age como um array. Uma lista não ordenada é muito parecido com um array. Bingo! Eles estamos matrizes, apenas em diferentes formas. Você pode pensar em quaisquer dados listado como um array. Às vezes você organizar os dados como uma lista (para exibição), às vezes como um array (para armazenamento em memória), e às vezes é um seleto grupo (para entrada do usuário).