14

Tenho um select com 4 opções. Essas 4 opções são a quantidade de opções que aparecerá em um select multiplo.

Melhor ver para entender

O que eu quero é logo que o usuário selecionar a opção de quantidade de palavras mais frequentes, o javascript ja preencha o segundo select com o quantidade de palavras selecionado no primeiro select. Para isso, a opção maior que o usuário poderá colocar é 20 e o código por trás (em java) tem uma lista com as 20 palavras mais frequentes. Ou seja, preciso de uma função em javascript que pegue o valor selecionado no primeiro select (X) e carregue o segundo select com os X primeiros elementos da lista (em java).

Para que ele apareça no select o código está assim com o vetor:

<select name="vet[]" size="4" multiple><%
   for(int i=0;i<5;i++){ %> <option> <% out.print(documento.vetor[i]); %> </option><%  }  %>
</select> <br>

No caso, o for está com tamanho 5 por padrão, mas é esse número que desejo mudar..

5
  • 1
    De onde vêm as informações que preencherão o select? Ajax? Fixas no Javascript? 27/01/2015 às 0:27
  • @AndréRibeiro está em um vetor de tamanho 20 (ordenado).. criei o vetor dentro de um objeto, que usei no java. 27/01/2015 às 2:40
  • 1
    Adicione o vetor à sua pergunta pra ficar mais fácil de visualizar. 27/01/2015 às 3:34
  • @AndréRibeiro pronto.. olha se ajudou a entender 27/01/2015 às 19:47
  • 1
    Eu faria isso expondo um serviço REST, e.g., /palavras?limite=5. Esse serviços retornaria a lista do lado do Java. Do lado do cliente você pode utilizar o evento onchange do primeiro select para fazer uma requisição AJAX para esse novo serviço passando o novo limite. O callback da requisição AJAX simplesmente limparia as options anteriores e carregaria novas options para o segundo select conforme as palavras retornadas pelo serviço. 29/01/2015 às 21:52

1 Resposta 1

9
+50

Considerando que o select disponiveis é o mesmo do seu select vet[], que vem preenchido pelo java, eu faria desse modo:

var lista = [];

pegaLista();

function pegaLista() {
  var disponiveis = document.getElementById("disponiveis");
  for (i=0; i < disponiveis.options.length; i++) {
    lista.push(disponiveis.options[i].text);
  }
  limpaLista(disponiveis);
}

function muda() {
  var maisAtivas = document.getElementById("maisAtivas");
  var selecionado = maisAtivas.options[maisAtivas.selectedIndex].text;
  
  var disponiveis = document.getElementById("disponiveis");
  limpaLista(disponiveis);
  
  for (var i=0; i < selecionado; i++) {
    var option = document.createElement("option");
    option.text = lista[i];
    disponiveis.add(option);
  }
}

function limpaLista(elemento) {
  while(elemento.options.length > 0) {
    elemento.remove(0);
  }
}
Lista das
<select id="maisAtivas" onchange="muda()">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
palavras mais ativas.
<br><br>
<!-- Select semelhante ao seu com name='vet[]' que vem preenchido pelo java -->
<select id="disponiveis" multiple="true">
  <option>de - 5</option>
  <option>voce - 3</option>
  <option>que - 3</option>
  <option>isso - 2</option>
  <option>outra - 2</option>
</select>

JSFIDDLE

A função pegaLista() é executada assim que carregar a página. Ela irá pegar os dados do select que já vem preenchido pelo java. Depois de pegar os dados ele limpa o select para ficar vazio.

4
  • como posso pegar minha lista do java e passa-lá pro javascript ? 3/02/2015 às 13:17
  • 1
    Vocês pode fazer como fez quando passou as informações para o select. Depois por javascript pega as opções do select.
    – Franchesco
    3/02/2015 às 15:28
  • mas no select eu só imprimi na tela. Não sei como pegar essas informações e colocá-las no javascript 4/02/2015 às 12:36
  • 1
    @Pacíficão - atualizei a resposta considerando que a lista está no select.
    – Franchesco
    4/02/2015 às 13:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .