Jump to content
Biel.

select - carregar item

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites
<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>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Direto ao ponto. Pessoal abaixo temos dois select . Gostaria que 
      ao selecionar item_aaa mostrasse no segundo select o item_verde ou 
      ao selecionar item_bbb mostrasse no segundo select o item_amarelo ou 
      ao selecionar item_ccc mostrasse no segundo select o item_azul 
       
      NOTA: Pessoal quero fazer este efeito com javascript, mas sem remover os itens do select HTML . Quero que o javascript ajude somente a fazer o efeito e não colocar os options value dentro do javascript .Obrigado por sua atenção amigo !
      <select name="letras" required > <option value=""></option> <option value="item_aaa"> aaa</option> <option value="item_bbb"> bbb</option> <option value="item_ccc"> ccc</option> </select> <select name="cores" required > <option value=""></option> <option value="item_verde"> verde</option> <option value="item_amarelo"> amarelo</option> <option value="item_azul">azul</option> </select>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal ao visualizar no browser a pagina 1 e em seguida clicar no link ir para pg 2, vou para a pg_2.php claro ! Uma vez na pg_2.php gostaria de clicar no link ir para pg 1 sem dar refresh na página. Alguém sabe como fazer isso ?
      <h2>página 1</h2> <h2> <a href="pg_2.php">ir para pg 2</a> </h2> <h2>página 2</h2> <h2> <a href="pg_1.php">ir para pg 1</a> </h2>  
    • By Biel.
      Direto ao ponto. Pessoal abaixo temos pg_home.php  e  pg_3.php . Temos dois codigo javascript abaixo que impede de voltar para (pagina anterior). Estou usando o primeiro código na pg_home.php para teste e está funcionando normalmente.
      Quero fazer o seguinte: 
      visualizo normalmente no browser(f12) a pg_home.php  e em seguida clico no link pg_3.php para visitar a pg_3.php claro ! 
      O codigo javascript IMPEDE este link <a href="javascript:history.go(-1);" style="font-size:30px;" >« voltar</a>de voltar para pagina anterior  e IMPEDE também a seta do browser de voltar para pagina anterior  ..
      Gostaria que o codigo javascript IMPEDISSE somente a seta do browser de voltar para pagina anterior  e não este link <a href="javascript:history.go(-1);" style="font-size:30px;" >« voltar</a>   
      A ideia pessoal é que este código <script>window.history.forward(1);</script>  continue impedindo normalmente de voltar para (pagina anterior) usando  a seta do browser, mas não
      impeça este codigo <a href="javascript:history.go(-1);" style="font-size:30px;" >&laquo; voltar</a> de voltar para página anterior
       
      Alguém sabe como fazer isso? Obrigado .
       
      Esta é a pg_home.php e tem este conteudo <script>window.history.forward(1);</script> <h2>pg home  </h2> <h2> <a href="pg_3.php">pg 3</a> </h2> ...
      Esta é a pg_3.php e tem este conteudo <h2>esta é a pagina 3 </h2> <a href="javascript:history.go(-1);" style="font-size:30px;" >« voltar</a> ...
      <!-- impede de voltar para pagina anterior --> <!-- <script>window.history.forward(1);</script> --> <!-- impede de voltar para pagina anterior --> <!-- <script scr="text/javascript"> function preventBack(){ window.history.forward(); } setTimeout("preventBack()",0); window.onunload=function(){null}; </script> -->  
       
    • By Biel.
      Olá Pessoal. Direto ao ponto. Pessoal estou tentando desabilitar o botão voltar da página que fui redirecionado. Abaixo temos três páginas 
      pg_Form.php pg_1.php pg_2.php  Ao selecionar o item pg_1 e pressionar o botão salvar , vou ser redirecionado para pg_1.php . Gostaria que a pg_1.php ficasse com o botão voltar DESABILITADO
      Ao selecionar o item pg_2 e pressionar o botão salvar , vou ser redirecionado para pg_2.php . Gostaria que a pg_2.php ficasse com o botão voltar HABILITADO
       
      Nota:  Pessoal não necessariamente é para impedir de voltar para a pg_form.php  .  Note pessoal que estou impondo uma situação entre pg_1 e pg_2 dependendo do item que for selecionado.
      esta é a pagina pg_Form.php - com código php + formulario <?php $pg_1 = $_POST['pg_1']; $pg_2 = $_POST['pg_2']; if($itemSelecionado == 'pg_1' ){ $sql = mysqli_query($con, "INSERT INTO tab_aprendiz( pg_1 , pg_2 )VALUES( '".$pg_1."' , '".$pg_2."' )"); header("location: pg_1.php "); } else{header("location: pg_2.php ");} ?> <form> <select name="paginas"required > <option value="">selecione</option> <option value="pg_1">pg_1</option> <option value="pg_2">pg_2</option> </select> <input type="submit" name="MM_ACAO" class="botao_JHN" value="Salvar" /> </form> ============================================= está é a pg_1.php - tem apenas uma mensagem dizendo: sucesso ============================================= está é a pg_2.php - tem apenas uma mensagem dizendo: ocorreu um erro  
       
    • By Biel.
      Boa tarde. Direto ao ponto. Pessoal tenho 10 páginas para cadastrar dados. quero alterar o link que está dentro do header de uma só vez 
      Da pg_01 até pg_05 tem header("location: formularioAAA.php"); em todas as páginas
      da pg_06 até pg_10 tem header("location: formularioBBB.php"); em todas as páginas
       
      conforme vocês perceberam, 
      se eu acessar uma página qualquer da pg_01 até pg_05 e pressionar salvar, serei redirecionado para formularioAAA.php , agora se
      se eu acessar uma página qualquer da pg_06 até pg_10 e pressionar salvar, serei redirecionado para formularioBBB.php 
       
      Quero alterar de uma só vez o link formularioAAA.php que está dentro do header  e não manualmente. Alguém sabe fazer ou tem alguma idéia de como tentar fazer? Obrigado
      pg_01.php <?php $aluno = $_POST['aluno']; $sql = mysqli_query($con, "INSERT INTO tab_01(aluno)VALUES('".$aluno."') "); header("location: formularioAAA.php"); ?> pg_02.php <?php $carro = $_POST['carro']; $sql = mysqli_query($con, "INSERT INTO tab_02(carro)VALUES('".$carro."') "); header("location: formularioAAA.php"); ?> pg_03.php <?php $barco = $_POST['barco']; $sql = mysqli_query($con, "INSERT INTO tab_03(barco)VALUES('".$barco."') "); header("location: formularioAAA.php"); ?> pg_04.php <?php $cadeira = $_POST['cadeira']; $sql = mysqli_query($con, "INSERT INTO tab_04(cadeira)VALUES('".$cadeira."') "); header("location: formularioAAA.php"); ?> pg_05.php <?php $teclado = $_POST['teclado']; $sql = mysqli_query($con, "INSERT INTO tab_05(teclado)VALUES('".$teclado."') "); header("location: formularioAAA.php"); ?>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.