Select Multiple with dynamic operation

Question

I have a select with 4 options. These 4 options are the number of options that will appear in a multiple select.

What I want is as soon as the user selects the option of number of frequently asked words, the javascript already fills the second select with the number of words selected in the first select. For this, the largest option that the user can put is 20 and the code behind (in java) has a list of the 20 most frequent words. That is, I need a javascript function that takes the selected value in the first select (X) and load the second select with the first X elements of the list (in java).

So he can show up at select the code is like this with the vector:

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

In this case, the for is with size 5 by default, but it is this number that I wish to change..

Answer 1

whereas the select disponiveis is the same as yours select vet[], that comes filled by java, I would do so:

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

The function pegaLista() is executed as soon as you load the page. It will retrieve the data from select which is already filled in by java. After taking the data it cleans the select to be empty.