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. Confira 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 de ter apenas um valor. Você precisará definir uma opção para dizer ao navegador para permitir que mais de um item a ser selecionado.

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

várias Seleções
 

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

• Ligar para selecionar objeto selLanguage. Como de costume, os elementos do formulário precisa de um identidade atributo para que você possa 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 disparar 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 é disparado quando você quer que aconteça.

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

Como escrever o código javascript

O código javascript para a 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 normalmente 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 o showChoices () função faz:

Na primeira, o código parece intimidante, mas se você quebrá-lo para baixo, 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. Criar uma variável de cadeia para conter a saída.

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

    var result = "
   Seu Languageslt; / h2> "-

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 uma matriz.

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

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

   o currentOption variável mantém uma referência para cada 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 foi selecionado, adicione uma entrada para a lista de saída.

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

    resultado + = "

8. "+ CurrentOption.value +" lt; / li> n ";

9. Fechar a lista.

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

    resultado + = "lt; / ul> n" -

10. resultados de impressão para a div.

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

     output = document.getElementById ( "output") - output.innerHTML = result-

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