I need to fill 2 fields using select

Question

I need to fill 2 fields using select

Navigation

#1 by (2 votes)

3

I have select with the following values in option :

<select id="frutas" name="frutas" >
     <option value="">Selecione...</option>
     <option value="Maçã - 10.00"> Maçã </option>
     <option value="Banana - 15.00"> Banana </option>                      
</select>

When selecting an option, the data is populated in a text field with ID: nome_preco :

<input type="text" id="nome_preco"  name="nome_preco" value="" />

I need to fill in another field but only with the price of the fruit:

<input type="text" id="preco"  name="preco" value="" />

So if I select " Maçã ", my fields would be populated with the data:

Fruit: Maçã - 10.00

Value: 10.00

How can I do this? Would it be possible to do this using jQuery? can you help me? Thank you

html jquery

asked by anonymous 02.09.2016 / 02:00

1 answer

Instantiate objects dynamically CSS - Format a table

score 2 · Accepted Answer

See the code below:

$('#frutas').change(function(){
     
     $('#preco').val($('#frutas').val());
  
     $('#nome').val($('#frutas option:selected').text());
  
     $('#nome_preco').val($('#frutas option:selected').text() + ' - ' + $(this).val());
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="frutas" name="frutas" >
     <option value="">Selecione...</option>
     <option value="10.00">Maçã</option>
     <option value="15.00">Banana</option>                      
</select>
<br/>
<br/>
Preço<br/>
<input type="text" id="preco"  name="preco" value="" />

<br/>
<br/>
Nome<br/>
<input type="text" id="nome"  name="nome" value="" />     

<br/>
<br/>
Nome + preço:<br/>
<input type="text" id="nome_preco"  name="nome_preco" value="" />