hiding component input when selecting a value in the select field

Question

I have a component select which brings the countries from the database

<div class="form-group col-md-4">  
  <label>País *:</label> 
  <select required="required" id="selecionaPais" ng-model="pessoasEnderecos.pais.idPais" 
          class="form-control">
    <option value="" ></option>
    <option value="{{paises.idPais}}" ng-repeat="pais in paises">{{pais.nome}}</option>
  </select>
</div>

I want to make sure that, when selecting the country Brazil, the input town stay hidden

<div id="idCidade">
  <div class="form-group col-md-4">
    <label>Cidade:</label> 
    <input maxlength="20" type="text" class="form-control" ng-model="estrangeiro.nome" />
  </div>
</div>

Answer 1

As you are using Angularjs, just create a rule using a directive ng-show.

You know that the selected country ID will be saved in pessoasEnderecos.pais.idPais, from there it’s just do

ng-show="pessoasEnderecos.pais.idPais != ID_DO_BRASIL"

the input (or div, or any element) you intend to hide when the selected country is Brazil.

See an example running:

angular.module('app', []).controller('mainController', function() {  
  let ctrl = this;
  
  ctrl.idBrasil = 1;
  ctrl.pessoasEnderecos = { pais : { } };
  
  ctrl.paises = [
    { idPais: 1, nome: 'Brasil', },
    { idPais: 2, nome: 'Portugal' },
    { idPais: 3, nome: 'Noruega' },
    { idPais: 4, nome: 'Japão' }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="mainController as ctrl">
  <div class="form-group col-md-4">  
  <label>País *:</label> 
   <select required="required" id="selecionaPais" 
           ng-model="ctrl.pessoasEnderecos.pais.idPais" 
           class="form-control" 
           ng-options="pais.idPais as pais.nome for pais in ctrl.paises">      
    </select>
  </div>
    
  <div id="idCidade" ng-show="ctrl.pessoasEnderecos.pais.idPais != ctrl.idBrasil">
    <div class="form-group col-md-4">
      <label>Cidade:</label> 
      <input maxlength="20" type="text" class="form-control" 
       ng-model="estrangeiro.nome"/>
    </div>
  </div>
</div>

Answer 2

Here’s an example of how you could do this with jQuery, the basic difference will even be that instead of putting the values already predefined in options as I put in the example below, you will bring these values from the database by placing them in values of options of select:

jQuery(function($) {
  $('#selecionaPais').change(function() {
    var pais = $('#selecionaPais').val();
    switch (pais) {
      case '':
        $('#idCidade').show();
        break;
      case 'Brasil':
        //Oculta a div do campo cidade
        $('#idCidade').hide();
        break;
      case 'EUA':
        $('#idCidade').show();
        break;
      default:
        $('#idCidade').show();
        break;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group col-md-4">  
        <label>País *:</label> 
       <select required="required" id="selecionaPais" ng-model="pessoasEnderecos.pais.idPais" class="form-control">
        <option value=''>Selecione o país</option>
        <option value='Brasil'>Brasil</option>
        <option value='Argentina'>Argentina</option>
        <option value='EUA'>Estados Unidos</option>
      </select>
</div>
<br>
<div id="idCidade">
        <div class="form-group col-md-4">
            <label>Cidade:</label> <input maxlength="20"  type="text" class="form-control" ng-model="estrangeiro.nome" />
        </div>
</div>

Answer 3

Basically you will need to observe every time the value of your select is changed and when the value changed is equal to the value of the "Brazil" option then you must hide the input.

You can do this in several ways, following explanation of how I did in the example below:

1. I placed a function call on onChange of <select> that will pass the value of <option> selected as parameter.
2. I put a id in his <input /> country to identify you in the function.
3. The function will receive the value of <option> selected if it is Brazil will hide the <input />.

function OcultaCidade(opcaoSelecionada){
  var inputCidade = document.getElementById("inputCidade");

  if(opcaoSelecionada == "BR"){
    inputCidade.style.display = "none";
  }else{
    inputCidade.style.display = "inline";
  }
}

<div class="form-group col-md-4">  
  <label>País *:</label> 
  <select required id="selecionaPais" class="form-control" onchange="OcultaCidade(this.value)">
    <option value="EUA">Estados Unidos</option>
    <option value="BR">Brasil</option>    
    <option value="ES">Espanha</option>
  </select>
</div>

<div id="idCidade">
  <div class="form-group col-md-4">
    <label>Cidade:</label>
    <input maxlength="20" id="inputCidade" type="text" class="form-control" />
  </div>
</div>