How to get values from two html selects in javascript?

Question

How to get values from two html selects in javascript?

Navigation

#1 by (1 votes)

2

Basically I have the following code:

var associar = $("#associar");
var desassociar = $("#desassociar");
var permissoes = $("#permissoes");
var minhasPermissoes = $("#minhasPermissoes");
var gravar = $("#gravar");

associar.click(function() {
  minhasPermissoes.append(permissoes.find('option:selected'));
});

desassociar.click(function() {
  permissoes.append(minhasPermissoes.find('option:selected'));
});

gravar.click(function(){
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divclass="container">
  <div class="row">
    <div class="col-md-6">
      <label>Permissões</label>
      <select id="permissoes" class="form-control" multiple>
        <option value="Clientes">Clientes</option>
        <option value="Boletos">Boletos</option>
        <option value="Usuarios">Usuários</option>
        <option value="Configuracoes">Configurações</option>
      </select>
    </div>
    <div class="col-md-6">
      <label>Minhas Permissões</label>
      <select id="minhasPermissoes" class="form-control" multiple>
      </select>
    </div>
  </div>
  <br>
  <button id="associar" class="btn btn-primary">Associar</button>
  <button id="desassociar" class="btn btn-primary">Desassociar</button>
 <button id="gravar" class="btn btn-primary" style="float:right;">Gravar</button>
 <div id="texto">
 </div>

As you can see by running the code, I pass values (Object) from one checkbox to another and vice versa, I would like that when I click on record I pass the objects from these checkboxes as a List, to be treated on the Controller.

I tried doing the following, which ends up returning a List but only one object comes in.

var perfisUtilizados = [];
perfisUtilizados = $('#selectPerfisUtilizados').find('option');
var perfisDisponiveis = [];
perfisDisponiveis = $('#selectPerfisDisponiveis').find('option');

gravar..click(function() {
  location.href = '${pageContext.request.contextPath}/permissao/perfis/${id}/' + perfisUtilizados + "," + perfisDisponiveis;
});

And when you click on the record it passes to this method of Controller:

@Get("/permissao/perfis/{id}/{perfisUtilizados},{perfisDisponiveis}")
public void salvarPerfisDaPermissao(Long id, List<Perfil> perfisUtilizados,
        List<Perfil> perfisDisponiveis){
  //Implementação
}

How to solve?

javascript java html html5 html-select

asked by anonymous 24.02.2016 / 21:38

1 answer

Artisan command not to lose data from the database Error in using aliases and read in ShellScript

score 1 · Accepted Answer

Using jQuery, you can send the permission lists inside the request body in JSON format as well

gravar.click(function() {
  $.ajax({
    headers: {'Content-Type': 'application/json; charset=utf-8'}
    type: 'POST',
    url: url,                                  // Substitua pela URL do sistema
    data: JSON.stringify({
      permissoes: permissoes.find('option').map(function() {
        return this.value;
      }).toArray(),
      minhasPermissoes: minhasPermissoes.find('option').map(function() {
        return this.value;
      }).toArray()
    }),
  }).done(function(response, event_type) {     // Em caso de sucesso
    console.log('done', response, event_type);
  }).fail(function(response, event_type) {     // Em caso de falha
    console.log('fail', response, event_type);
  }).always(function(response, event_type) {   // Depois do sucesso/falha
    console.log('always', response, event_type);
  })
});

Inspect the response and event_type variables, by the developer tool, to perform the required client side handling.

As I do not program in Java I would not know how the data will be received on the server side but the intent is to send an object with the following pattern:

{
  "permissoes": ["Clientes", "Boletos"],
  "minhasPermissoes": ["Configuracoes", "Usuarios"],
}