Change one combobox from the other

Question

Change one combobox from the other

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

Colleagues.

I have a combobox which has the hotels list:

<select name="Hotel" id="Hotel" class="form-control">
<option value="Selecione">Hotel</option>
<option value="Hotel A">Hotel A</option>
<option value="Hotel B">Hotel B</option>
<option value="Hotel C">Hotel C</option>
</select>

Only each hotel will have the relation of the accommodation with their respective values that is in another combobox. See:

<select name="Acomodacao" id="Acomodacao" class="form-control">
    <option value="Selecione">Acomodação</option>
    <option value="SGL">Single Valor X</option>
    <option value="DBL">Duplo Valor X</option>
    <option value="TPL">Triplo Valor X</option>
    <option value="QDL">Quadruplo Valor X</option>
    <option value="QTP">Quintuplo Valor X</option>
</select>

How would I do that when I select a hotel, it appears in the other combobox the accommodation referring to it automatically?

javascript jquery

asked by anonymous 27.08.2015 / 20:15

2 answers

1

Do something like this:

$('#Hotel').change(function() {
  var valorSelecionado = $(this).val();

  $('#Acomodacao').prop('enabled', true);
  $('#Acomodacao').prop('selected', valorSelecionado);
});

27.08.2015 / 20:44

How do I sign in with Facebook in React Native in the new format? PostgreSQL COUNT function does not work

score 3 · Accepted Answer

You can create an object with the list of relations of the hotels and their accommodations, for example:

jQuery(document).ready(function($){
    
  // Objeto com as relações de hotéis e suas respectivas acomodações disponíveis
  var acomodacoes = {
    Selecione: ['Selecione'],
    HotelA: ['Selecione', 'SGL', 'DBL', 'TPL'],
    HotelB: ['Selecione', 'SGL', 'DBL', 'TPL', 'QDL'],
    HotelC: ['Selecione', 'SGL', 'DBL', 'TPL', 'QTP']
  }
  
  // Lista de acomodações
  $acomods = $('#Acomodacao option');
  
  // Evento ao alterar o hotel
  $('#Hotel').on('change', function(event){
    // Hotel atual (selecionado)
    var hotel = this.value;
    
    // Percorre a lista de acomodações
    $acomods.each(function(index, el){
      
      // Verifica se a acomodação atual existe na relação
      // de acomodações para o hotel selecionado
      if (acomodacoes[hotel].indexOf(el.value) == -1) // Não existe
          $(el).prop('disabled', true); // Desabilita a acomodação
      else // Existe
        $(el).prop('disabled', false); // Habilita a acomodação
    });
  }).change(); // Executa o método change uma vez para desabilitar 
               // todas as acomodações pois nenhum hotel foi selecionado ainda
});

select option[disabled] {
  /* Oculta os options que estão desabilitados */
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><selectname="Hotel" id="Hotel" class="form-control">
    <option value="Selecione">Hotel</option>
    <option value="HotelA">Hotel A</option>
    <option value="HotelB">Hotel B</option>
    <option value="HotelC">Hotel C</option>
</select>
<select name="Acomodacao" id="Acomodacao" class="form-control">
    <option value="Selecione">Acomodação</option>
    <option value="SGL">Single Valor X</option>
    <option value="DBL">Duplo Valor X</option>
    <option value="TPL">Triplo Valor X</option>
    <option value="QDL">Quadruplo Valor X</option>
    <option value="QTP">Quintuplo Valor X</option>
</select>

I could also, as already mentioned in the question comments, look up the Hotel x Accommodations relationship in a JSON file using AJAX.