Ir para conteúdo
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Biel.
      Direto ao ponto. Pessoal no 1º select ao selecionar o item Audi , apareçe no 2º select o item audiVerde. Até aqui tudo bem
      O problema é quando em seguida decido selecionar o item BMW . Gostaria de saber por que o item do 2º select não carrega para bmwAzul
      Nota: Pessoal quero deixar os dois selects visivel juntamente com os options value e não embutido no código javascript. Obrigado!
       
      1º select <select id="mySelect1" size="1" onchange="myFunction1()"> <option value=""></option> <option value="Audi" >Audi</option> <option value="BMW" >BMW</option> </select> 2º select <select id="mySelect2" size="1" style="width:100px;" > <option value=""></option> <option value="audiVerde" class="aprendiz" style="display:none;" >audiVerde</option> <option value="bmwAzul" class="aprendiz" style="display:none;">bmwAzul</option> </select> ...
      <script> function myFunction1() { var x = document.getElementById("mySelect1").value; if(x==''){ document.getElementsByClassName("aprendiz")[0].style.display = "none"; document.getElementsByClassName("aprendiz")[1].style.display = "none"; } else if(x=='Audi'){ document.getElementsByClassName("aprendiz")[0].style.display = "block"; document.getElementsByClassName("aprendiz")[1].style.display = "none"; } else if(x=='BMW'){ document.getElementsByClassName("aprendiz")[0].style.display = "none"; document.getElementsByClassName("aprendiz")[1].style.display = "block"; } } </script>
       
    • Por Biel.
      Direto ao ponto: Pessoal o codigo abaixo esta funcionando normalmente. Quero resolver apenas uns detalhes, é o seguinte: No select A
      ao selecionar o item camisa por EX gostaria que no select B exibisse somente dois itens (camisaP e camisaM)  e não todos os itens 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").on("change",function(){ if($('#id_select_a').val()==''){ $("#id_select_b").val(""); } //------------------------------------------------ else if($('#id_select_a').val()=='camisa'){ $("#id_select_b").val("camisaP"); } //------------------------------------------------ else if($('#id_select_a').val()=='bermuda'){ $("#id_select_b").val("bermudaP"); } //------------------------------------------------ else if($('#id_select_a').val()=='blusa'){ $("#id_select_b").val("blusaP"); } //------------------------------------------------ }); }); </script> select A <select name="roupas" id="id_select_a" required> <option value=""></option> <option value="camisa">camisa</option> <option value="bermuda">bermuda</option> <option value="blusa">blusa</option> </select> select B <select name="tamanho" id="id_select_b" required > <option value=""></option> <option value="camisaP" >camisaP</option> <option value="camisaM" >camisaM</option> <option value="bermudaP" >bermudaP</option> <option value="bermudaM" >bermudaM</option> <option value="blusaP" >blusaP</option> <option value="blusaM" >blusaM</option> </select>  
    • Por Biel.
      Boa tarde a todos. direto ao ponto. Pessoal abaixo temos EX1 e Ex2, ambos são iguais, exceto a cor do texto que é diferente. Gostaria que os nomes das class(botton e div) do EX1 e Ex2  não fossem alterados.
      Gostaria que EX1 exibisse na tela sua própria formatação css e não a formatação css do EX2
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> EX 1 <style> .class01{font-size:20px; color:grey; } .class02{font-size:30px; color:orange;} .botao01{padding:10px 20px;} </style> <script> $(document).ready(function(){ $(".botao01").click(function(){ $("div.class01").removeClass().addClass('class02'); }); }); </script> <div class="class01" >div class01 </div> <button class="botao01">botao01</button> <hr /> EX 2 <style> .class01{font-size:20px; color:red; } .class02{font-size:30px; color:purple;} .botao01{padding:10px 20px;} </style> <script> $(document).ready(function(){ $(".botao01").click(function(){ $("div.class01").removeClass().addClass('class02'); }); }); </script> <div class="class01" >div class01 </div> <button class="botao01">botao01</button>  
    • Por Biel.
      Boa noite a todos . Direto ao ponto. Pessoal no select name="cursos" ao selecionar o item php  gostaria que exibisse sem carregar a página o (select name="php_nivel") ou ao selecionar o item css gostaria que exibisse sem carregar a página o (select name="css_nivel") 
       
      Cursos:<br /> <form id="form1" name="form1" method="post" action=""> <select name="cursos" id="mySelect" required onchange="myFunction()"> <option value="" selected></option> <option value="php">curso de php</option> <option value="css">curso de css</option> </select> </form> <br /> <p id="biel"></p> <script> function myFunction() { var x = document.getElementById("mySelect").value; document.getElementById("biel").innerHTML = "" + x; } </script> <br /> <?php if (isset($_POST["cursos"])){ ?> <?php if ($_POST['cursos'] == 'php' ){ ?> curso de php: <select name="php_nivel" required > <option value="" selected></option> <option value="php_nivel_1">php nivel 1</option> <option value="php_nivel_2">php nivel 2</option> <option value="php_nivel_3">php nivel 3</option> </select> <?php } elseif ($_POST['cursos'] == 'css' ){ ?> <select name="css_nivel" required > <option value="" selected></option> <option value="css_nivel_1">css nivel 1</option> <option value="css_nivel_2">css nivel 2</option> <option value="css_nivel_3">css nivel 3</option> </select> <?php } } ?> <br /> <input type="text" name="" value="" />  
    • Por Biel.
      Boa noite a todos .direto ao ponto. Pessoal estou tentando fazer o seguinte: Ao selecionar um valor qualquer e uma parcela qualquer, gostaria que aparecesse no input o valor das parcelas. Não sei se é possivel fazer com php ou só é possível com javascript. Obrigado! 
       
      <pre> <?php // round floor ceil $valor_total = ((318.00)); $parcelas = 4; $divide = ($valor_total / $parcelas); $resultado_divisao = $divide ; $multiplica = $parcelas * $resultado_divisao; $resultado_multiplicacao = $multiplica ; echo 'valor_total: R$ '.$valor_total.'<br />'; echo 'parcelas: '.$parcelas.' x ' . 'de ' .$resultado_divisao.'<br />'; echo 'multiplica '.$parcelas. ' x ' .$resultado_divisao. ' = ' .$resultado_multiplicacao; ?> </pre> ...
      valor_total <select name="valor_total" style="width:100px;" required > <option value=""></option> <?php for($i = 38; $i < 1000; $i+=10){ $cadastra = $i.'.00'; $exibe = 'R$ ' .$i. ',00'; ?> <option value="<?php echo $cadastra; ?>"><?php echo $exibe; ?></option> <?php }?> </select> <br><br> parcelas <select name="parcelas" style="width:100px;" required > <option value=""></option> <?php for($i = 2; $i <= 8; $i+=2){ $cadastra = $i; $exibe = $i.'x'; ?> <option value="<?php echo $cadastra; ?>"><?php echo $exibe; ?></option> <?php }?> </select> de <input type="text" name="resultado" value="">  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.