Select help to create new input text

Navigation
1

Good afternoon, I have the following doubt:

I have a select field with more or less 100 options. In this current select, I choose an option and this chosen option is populated in a new input text ...

I wanted to put a "More" button and when I clicked create a new input text field ... now my doubt: it is possible using the same select I make a new choice and fill that new field without losing what it was filled in earlier?

I searched and found nothing that would do that, if anyone can give me a suggestion of how to do this, it would help me a lot.

Example: 

<select class="form-control" id="frutas" name="frutas"  autofocus >
  <option value="">Selecione...</option>
  <option value="Maca">Maça</option>
  <option value="Uva">Uva</option>
  <option value="Morango">Morango</option>
  <option value="Banana">Banana</option>
</select>

And my job: 

$('#frutas').change(function () {                                                                                                                                                          $('#nome_fruta').val($('#frutas option:selected').text());
});

In the example above, I choose a fruit and it fills an input with the value of select. Now I wanted to put a button to create a new field to receive another select fruit.

Att

    
asked by anonymous 26.09.2016 / 18:59

2 answers

2

From what I could understand from your explanation, you want to do something like this, right? 

var count = 1;
$(document).on('change', '#opcao', function(){

  $('#valor'+count).val(this.value);
});

$(document).on('click', '#mais', function(){
  count++;
  var inputText = '<br><input type="text" id="valor'+count+'" value=""/>';
  $('#conteudo').append(inputText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><head><title>ExemplodeCódigo</title></head><body><sectionid="conteudo">
    <h1>Selecione uma opção</h1>
    <select id="opcao">
        <option>Selecione</option>
	<option value="opacao1">Opção1</option>
	<option value="opacao2">Opção2</option>
	<option value="opacao3">Opção3</option>
	<option value="opacao4">Opção4</option>
	<option value="opacao5">Opção5</option>
    </select>
    <a href="#" id="mais">mais</a>
    <br>
    <input type="text" id="valor1" value=""/>
  </section>
</body>
</html>
    
26.09.2016 / 19:37
0

Good morning everyone!

I did it this way. It's working, I wanted a button to remove the line (to remove the two inputs) and from what I noticed, when I click on the "more" link it adds the two fields I want, but the order is strange ... have to sort Is this right? 

var count = 1;
$(document).on('change', '#fruta', function(){

  $('#nomeFruta'+count).val(this.value);
$('#descricao'+count).val();
});

$(document).on('click', '#mais', function(){
  count++;
 var inputText2 = '<br> <div class="form-group col-md-6"><label for="nomeFruta">Fruta:</label><input type="text" class="form-control" id="nomeFruta' + count + '" value=""/></div>';
                                                                        var inputText = '<br> <div class="form-group col-md-4"><label for="descricao">Descrição:</label><input type="text" class="form-control" id="descricao' + count + '" value=""/></div>';
                                                                        $('#conteudo').append(inputText2);
                                                                        $('#conteudo').append(inputText);
});
<link type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><head><title>Modificando...</title></head><body><divclass="container-fluid">
<div class="row">
  <section id="conteudo">
<div class="form-group col-md-6">
    <label for="fruta">Escolha uma fruta</label>
    <select id="fruta">
        <option>Selecione</option>
	<option value="Maca">Maçã</option>
	<option value="Uva">Uva</option>
	<option value="Morango">Morando</option>
	<option value="Limao">Limão</option>
	<option value="Mexerica">Mexerica</option>
    </select>
    <a href="#" id="mais">mais</a>
</div>
</section>
</div>
   <div class="row">
<div class="form-group col-md-6">
<label for="nomeFruta">Fruta:</label>
    <input type="text" class="form-control" id="nomeFruta1" value=""/>
</div>
<div class="form-group col-md-4">
<label for="descricao">Descrição:</label>
    <input type="text" class="form-control" id="descricao1" value=""/>
</div>

</div>
  
</div>
</div>
</body>
</html>
    
27.09.2016 / 14:26
Fit the columns header into a DGV, C # Where in Join - Sequelize