Error hiding field with Jquery

Question

I have an html code and I would like to hide a field when selecting the "Graph" option (when the field is visible I need it to be configured "required autofocus") and tried with jquery, however, unsuccessfully.

HTML

<div class="col-sm-3">TIPO:
<div class="input-group col-lg-10">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
<select required autofocus name='tipo_r' id='tipo_r' class="form-control">
<option value="LISTA">LISTA</option>
<option value="GRAFICO">GRÁFICO</option>
</select>
</div>
</div>		

<div id="ocultar" class="col-sm-3">OPERADORA:
<div class="input-group col-lg-10">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
<select class="form-control" id="op" name="op">
<option value="">SELECIONAR</option>
<option value="OP1">OP1</option>
<option value="OP2">OP2</option>
</select>
</div>
</div>

JAVASCRIPT

$(document).ready(function(){
$("#tipo_r").change(function(){
var valor = $('#op');
if( $(this).val() == "GRAFICO")
valor
.show()
.attr('required', true)
.focus();
else
valor
.hide()
.attr('required', false);								
});
});

Answer 1

First your field that has to be hidden must already start hidden, so put display:none in the CSS

If you don’t want to use CSS just put var valor = $('#op'); valor.hide(); before function change(), to get him hidden

var div = $('#ocultar');
div.hide();

$(document).ready(function() {
  var valor = $('#op');
  valor.hide();
  $("#tipo_r").change(function() {
    if ($(this).val() === "GRAFICO") {
      valor.show().attr('required', true).focus();
      div.show()
    } else {
      valor.hide().attr('required', false);
      div.hide()
    }
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <div class="col-sm-3">TIPO:
    <div class="input-group col-lg-10">
      <div class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </div>
      <select required autofocus name='tipo_r' id='tipo_r' class="form-control">
        <option value="LISTA">LISTA</option>
        <option value="GRAFICO">GRÁFICO</option>
      </select>
    </div>
  </div>

  <div id="ocultar" class="col-sm-3">OPERADORA:
    <div class="input-group col-lg-10">
      <div class="input-group-addon">
        <span class="glyphicon glyphicon-search"></span>
      </div>
      <select class="form-control" id="op" name="op">
        <option value="">SELECIONAR</option>
        <option value="OP1">OP1</option>
        <option value="OP2">OP2</option>
      </select>
    </div>
  </div>