Change one combobox from another

Question

Colleagues.

I have a combobox that has the relationship of hotels:

<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 that each hotel will have the relationship of the accommodations 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 make it so that when selecting a hotel, the accommodation for it automatically appears on the other combobox?

Answer 1

You can create an object with the list of hotel relationships and their accommodations, 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>
<select name="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>

It could also, as already mentioned in the comments of the question, seek the relationship of Hotel x Accommodations in a JSON file using AJAX.

Answer 2

do something like this:

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

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