Pegar valor do select para o input em JavaScript

Wander Santos · Julho 30, 2014

Como seria pegar o valor do select (option) e quando clicar em salvar a informação for para um input em jquery?? Mas no caso seria varios select para um só input.

Tenho o html:

<body>
    <form>
      <div class="criança"><label>Crianças:</label><br>
            <select class="select" >
                      <option value="0" selected="selected">0</option>    
                      <option id="opc1">1</option>
                      <option id="opc2">2</option>
                      <option id="opc3">3</option>
                      <option id="opc4">4</option>
                      <option id="opc5">5</option>
                      <option id="opc6">6</option>
                     <option id="opc7">7</option>
                      <option id="opc8">8</option>
                      <option id="opc9">9</option>
                      <option id="opc10">10</option>
            </select>
            <input type="text" value="-" class="input" />
            
      </div><br><br><br>
      <div class="box2">
            <div class="idade" id="idade" display: block;>
                        
                    
                <div class="box">
                        <label class="titulo">Criança 1:</label>
                    <select class="select2" name="selectChildren">
                          <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
            <div class="idade" id="idade2" display: block;>
                    <label class="titulo">Criança 2:</label>
                    <select class="select2">
                          <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>
            <div class="idade" id="idade3" display: block;>
                    <label class="titulo">Criança 3:</label>
                    <select class="select2">
                          <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>
                    
            <div class="idade" id="idade4" display: block;>
                    <label class="titulo">Criança 4:</label>
                    <select class="select2">
                          <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>        
            
            <div class="idade" id="idade5" display: block;>
                    <label class="titulo">Criança 5:</label>
                    <select class="select2">
                         <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>
                      
            <div class="idade" id="idade6" display: block;>
                    <label class="titulo">Criança 6:</label>
                    <select class="select2">
                         <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>
            <div class="idade" id="idade7" display: block;>
                    <label class="titulo">Criança 7:</label>
                    <select class="select2">
                         <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>
                    
            <div class="idade" id="idade8" display: block;>
                    <label class="titulo">Criança 8:</label>
                    <select class="select2">
                          <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>        
            
            <div class="idade" id="idade9" display: block;>
                    <label class="titulo">Criança 9:</label>
                    <select class="select2">
                          <option> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>                          
            
            <div class="idade" id="idade10" display: block;>
                    <label class="titulo">Criança 10:</label>
                    <select class="select2">
                          <option selected="selected"> Idade </option>         
                           <option value="1">1 ano</option>
                           <option value="2">2 ano</option>
                             <option value="3">3 ano</option>
                             <option value="4">4 ano</option>
                             <option value="5">5 ano</option>
                             <option value="6">6 ano</option>
                             <option value="7">7 ano</option>
                             <option value="8">8 ano</option>
                             <option value="9">9 ano</option>
                             <option value="10">10 anos</option>
                      </select>
                    </div>                       
                    <input type="submit" onclick="location. href= 'quartos.html' " value="Fechar" class="i2Style2">
                </div>
            </div>
    </form>

CL4nG · Julho 30, 2014

window.onload = function()

{

//Ou: document.getElementById("opcoes").addEventListener("change", function()...

document.getElementById("opcoes").onchange = function()

{

var value = this.value;

alert(value);

}

</script>

<option value="0">selecione uma opção</option>

<option value="1">Opção 1</option>

<option value="2">Opção 2</option>

</select>

Wander Santos · Julho 30, 2014

Eu queria que a informação do select fosse para o input, mais seria no caso varios select......vou te passar o link de um site com este exemplo.

http://reservations.omnibees.com/Default.aspx?q=1031&CheckIn=28072014&CheckOut=01082014&sid=2de7a603-8709-447b-a1de-cf808f796d7b#/&diff=false&CheckIn=28072014&CheckOut=01082014&Code=&group_code=&loyality_card=&NRooms=1&ad=1&ch=0&ag=-

A função do select criança....

William Bruno · Julho 30, 2014

Pergunta, por que ? por que vc quer escrever no input ?

A sugestão do @CL4nG, é perfeita e faz o que vc precisa. Tem alguma dúvida ?

Tente e diga qual.

Wander Santos · Julho 30, 2014

Pergunta, por que ? por que você quer escrever no input ?

A sugestão do @CL4nG, é perfeita e faz o que você precisa. Tem alguma dúvida ?

Tente e diga qual.

A ideia é quando a pessoa selecionar a idade de cada criança a informação vai para o input..... Vou postar html mais jquery e css:

<!doctype html>

<html>

<head>

<title>Documento sem título</title>

<style>

.criança{

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

font-size: 14px;

color: #444;

line-height: normal;

position: relative;

float:left;

}

.select{

float:left;

width:60px;

height: 30px;

margin-top: 5px;

padding: 6px 12px;

font-size: 14px;

color: #555555;

border: 1px solid #cccccc;

border-radius: 4px;

}

.select2{

float:left;

margin-left:10px;

width:90px;

height: 30px;

margin-top: 5px;

padding: 6px 12px;

font-size: 14px;

color: #555555;

border: 1px solid #cccccc;

border-radius: 4px;

}

.input{

float:left;

margin-left: 30px;

width:150px;

height: 15px;

margin-top: 5px;

padding: 6px 12px;

font-size: 14px;

color: #555555;

background-color: #ffffff;

background-image: none;

border-radius: 4px;

}

.box{

float:left;

width:200px;

height:100%;

margin-left: 90px;

margin-top:10px;

padding: 6px 12px;

border: 1px solid #CCC;

border-radius: 6px;

}

.titulo{

float:left;

margin-top: 10px;

font-family: Helvetica,Arial,sans-serif;

font-size: 14px;

color: #444;

}

.i2Style2{

font:bold 14px "Arial Black", Gadget, sans-serif;

font-style:normal;

color:#ffffff;

background:#158edb;

border:0px solid #ffffff;

text-shadow:0px 0px 0px #222222;

box-shadow:0px 0px 0px #000000;

-moz-box-shadow:0px 0px 0px #000000;

-webkit-box-shadow:0px 0px 0px #000000;

border-radius:10px 10px 10px 10px;

-moz-border-radius:10px 10px 10px 10px;

-webkit-border-radius:10px 10px 10px 10px;

width:60px;

padding:10px 43px;

cursor:pointer;

float:left;

margin-left: 75px;

margin-top: 15px;

}

.i2Style2:active{

cursor:pointer;

position:relative;

top:2px;

}

</style>

$(document).ready(function (){

$('#idade').hide();

$("#opc1").click(function(event){

event.preventDefault();

$("#idade").show();

})

$("#opc1").click(function(event){

event.preventDefault();

$("#idade10, #idade9, #idade8, #idade7, #idade6, #idade5, #idade4, #idade3, #idade2").hide();

})

$("#opc2").click(function(event){

event.preventDefault();

$("#idade10, #idade9, #idade8, #idade7, #idade6, #idade5, #idade4, #idade3").hide();

})

$(document).ready(function (){

$('#idade2, #idade').hide();

$("#opc2").click(function(event){

event.preventDefault();

$("#idade2, #idade").show();

})

});

</script>

</head>

<body>

<form>

<div class="criança"><label>Crianças:</label><br>

</select>

</div><br><br><br>

<label class="titulo">Criança 1:</label>

<option> Idade </option>

</select>

<label class="titulo">Criança 2:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 3:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 4:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 5:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 6:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 7:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 8:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 9:</label>

<option> Idade </option>

</select>

</div>

<label class="titulo">Criança 10:</label>

<option selected="selected"> Idade </option>

</select>

</div>

</div>

</form>

</body>

</html>

CL4nG · Julho 30, 2014

Amigo, é melhor organizar isso aí, tem muitos dados se repetindo, coisas desnecessárias...

Sé você quer pegar o valor selecionado em um select via jQuery é só adicionar uma função de callback para o evento onchange.

Se o problema for o javascript bruto, então aqui vai com jQuery:

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

<script>
$(document).ready(function(){
	$("#criancas").change(function() {
		$("#crianca").val($(this).val());
	});
});
</script>


<form>
	<label>Criança selecionada:</label>
	<input type="text" value="" id="crianca">

	<select id="criancas">
	<option value="0">selecione uma criança</option>
	<option value="1" selected="selected">Criança 1</option>
	<option value="2">Criança 2</option>
	</select>
</form>

Mas não vejo motivo pra usar um select para preencher o valor de um input. Se for este o caso é melhor usar datalist.
Veja: http://forum.imasters.com.br/topic/524483-select2-preencher-automaticamente-campos-do-formulario/#entry2088330

Wander Santos · Julho 30, 2014

Amigo, é melhor organizar isso aí, tem muitos dados se repetindo, coisas desnecessárias...

Sé você quer pegar o valor selecionado em um select via jQuery é só adicionar uma função de callback para o evento onchange.

Se o problema for o javascript bruto, então aqui vai com jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
	$("#criancas").change(function() {
		$("#crianca").val($(this).val());
	});
});
</script>


<form>
	<label>Criança selecionada:</label>
	<input type="text" value="" id="crianca">

	<select id="criancas">
	<option value="0">selecione uma criança</option>
	<option value="1" selected="selected">Criança 1</option>
	<option value="2">Criança 2</option>
	</select>
</form>
Mas não vejo motivo pra usar um select para preencher o valor de um input. Se for este o caso é melhor usar datalist.

Veja: http://forum.imasters.com.br/topic/524483-select2-preencher-automaticamente-campos-do-formulario/#entry2088330

No index vai ficar somente um select pois no javascript tem a função abrir e esconder. O codigo que vc mim passou ficou massa Amigo, o que não consigo bolar é fazer com este imput receba mais de uma informação pra ficar mais ou menos assim:

CL4nG · Julho 31, 2014

Ainda está confuso, não da pra entender exatamente o que você quer.
Você quer adicionar as idades das crianças no input idade?
Se for isso é só adicionar uma classe com mesmo nome para todos os select's e no evento change você pega a idade de todos os select's e adiciona no input. Pra pegar o valor de um select individual, adicione um id para cada select.

Wander Santos · Agosto 4, 2014

Ainda está confuso, não da pra entender exatamente o que você quer.

Você quer adicionar as idades das crianças no input idade?

Se for isso é só adicionar uma classe com mesmo nome para todos os select's e no evento change você pega a idade de todos os select's e adiciona no input. Pra pegar o valor de um select individual, adicione um id para cada select.

Vou te dar o link do site que eu vi:

http://reservations.omnibees.com/Default.aspx?q=1031&CheckIn=08082014&CheckOut=23082014&sid=7aabc6a0-41a8-4a25-bccc-44081829399a#/&diff=false&CheckIn=08082014&CheckOut=23082014&Code=&group_code=&loyality_card=&NRooms=1&ad=1&ch=0&ag=-

Clica em criança, quantidade de criança e idades.

CL4nG · Agosto 5, 2014

Veja:

<script>

window.onload = function()
{

	document.getElementById("criancas").onchange = function()
	{
		var ncriancas = this.value; //quantidade de crianças
		//Select padrão, o que vai mudar é só o id de cada um
		var crianca = document.createElement("select");
		crianca.className = "crianca";
		

		for (var i = 0; i < 17; i++)
		{
			var option = document.createElement("option");
		    option.value = i;
		    option.text = i;
		    crianca.appendChild(option);
		}

		var fragment = document.createDocumentFragment();

		for (var i = 1; i <= ncriancas; i++)
		{
			var c = document.createElement("select");
			c.innerHTML = crianca.innerHTML;
			c.id = i;
			fragment.appendChild(c);
		}

		var divcriancas = document.getElementById("div-criancas");
		divcriancas.innerHTML = "";
		divcriancas.appendChild(fragment);
	}
}
</script>

 




Crianças: <select id="criancas">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

<div id="div-criancas">

</div>

Com isso é só obter o valor do select que foi selecionado, verificar o id e adicionar no input.

Arquivado

Pegar valor do select para o input em JavaScript

Recommended Posts

Wander Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wander Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wander Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wander Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wander Santos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

CL4nG 36

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante