hiding input component when selecting a value in the select field

Question

hiding input component when selecting a value in the select field

Navigation

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

0

I have a select component that brings the countries of 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 Brazil is selected, input city is 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>

javascript jquery angularjs html-select

asked by anonymous 09.11.2017 / 12:23

3 answers

1

Here is an example of how you could do this with jQuery , the basic difference is that instead of putting the already predefined values in options as I put it in the example below, you will bring those values from the database. data by putting 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><divclass="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>

09.11.2017 / 12:32

1

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

You can do this in several ways, here's an explanation of how I did it in the example below:

I placed a function call in the onChange of <select> which will pass the value of <option> selected as parameter.

I put id in your%% of country to identify it in the function.

The function will receive the value of <input /> selected if it is Brazil will hide <option> .

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>

09.11.2017 / 12:51

Add values returned from while How to make a slider footer running the site partners?

score 4 · Accepted Answer

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

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

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

no input (or div, or any element) that you want 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><divng-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>