select - carregar item

[Biel. 9]

Boa noite a todos. Direto ao ponto. Pessoal, gostaria que select A e select B ficasse visivel e somente os itens do select B ficasse invisivel. Uma vez resolvido está etapa gostaria que:
ao selecionar valor1 exibisse automaticamente o valor gol   e   ocultasse  o valor camisa ou
ao selecionar valor2 exibisse automaticamente o valor camisa   e   ocultasse o valor gol

Pessoal gostaria de resolver está tarefa com Jquery e não javascript. Obrigado!

 

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->

<script type='text/javascript'>
//$(document).ready(function(){											  
$(window).load(function(){
				
			$("#valor1 , #valor2").hide();
			
alterarValor = function (){
	
	  if($('#ao_selecionar').val()==1){
	  $("#valor1").show(),
	  $("#valor2").hide();
	  }
//--------------------------------------------	  
	  else if($('#ao_selecionar').val()==2 ){
	  $("#valor1").hide(),
	  $("#valor2").show();
	  
	  }
//--------------------------------------------	 
}
//--------------------------------------------
});

</script>

<form action="executou.php" method="post" name="form1"  id="form1"> 
Select A
  <select name="hhh" id="ao_selecionar" required onChange="alterarValor()">
    <option value="" ></option>
    <option value="1" required> carro</option>
    <option value="2" required> roupa</option>
</select>

<br />----------------------------------------------------- <br />

Select B
<select name="yyy" >
    <option value="gol" id="valor1" >gol</option>
    <option value="camisa" id="valor2"  >camisa</option>
</select>

<input type="submit"  value="enviar"  />
</form>

 

[abraaoz 0]

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

<script type="text/javascript">
$(function() {
    var opcoes = [
        {"categoria": {"id": "", "nome": ""}, "opcoes": []},
        {"categoria": {"id": 1, "nome": "carro"}, "opcoes": ["gol", "palio"]},
        {"categoria": {"id": 2, "nome": "roupa"}, "opcoes": ["camisa", "calça"]}
    ];
    $.each(opcoes, function() {
        $('#ao_selecionar').append('<option value="'+this.categoria.id+'">'+this.categoria.nome+'</option>');
    });
    $("#ao_selecionar").on("change", function() {
        $("#select_b").html('');
        var id_categoria = $(this).val();
        $.each(opcoes, function() {
            if(this.categoria.id == id_categoria) {
                $.each(this.opcoes, function() {
                    $("#select_b").append('<option>'+this+'</option>');
                });
                return false; // encerra o $.each
            }
        });
    });
});
</script>

<form action="executou.php" method="post" name="form1" id="form1">
    <label for="ao_selecionar">Select A</label>
    <select name="hhh" id="ao_selecionar" required></select>
    <br>-----------------------------------------------------<br>
    <label for="select_b">Select B</label>
    <select name="yyy" id="select_b"></select>
    <button type="submit">enviar</button>
</form>