fill input with select value in jquery

Question

I am trying to fill a value dynamically with jquery:

In case I want to put the value of the plan when selecting with jquery.

Ex.:

<div class="input-group input-group-lg">
                          <span class="input-group-addon">R$</span>
                          <input id="valor" type="number" min="0" class="form-control payment-value" aria-label="Amount (to the nearest dollar)" placeholder="Valor do pagamento">
                        </div> 



<div class="input-group input-group-lg">
                          <select class="form-control plan">
                              <option value="39256">Plano R$ 10,00</option>
                              <option value="45659">Plano R$ 11,00</option>
                          </select>
                        </div>

In my JS I have:

this.PLAN_ID = $('.plan').val();

and a date var:

'plan': parent.PLAN_ID,

The problem is that when I change the 'plan', the value is not changed dynamically, ie the plan gets the value 39256 which is the default item, someone could give a help?

Thank you

Answer 1

If I understand correctly, this is what you want:

$('.plan').on('change', function() {
  var plan = $(this).val();
  $('#valor').val(plan);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group input-group-lg">
                          <span class="input-group-addon">R$</span>
                          <input id="valor" type="number" min="0" class="form-control payment-value" value="39256" aria-label="Amount (to the nearest dollar)" placeholder="Valor do pagamento">
                        </div> 



<div class="input-group input-group-lg">
                          <select class="form-control plan">
                              <option value="39256">Plano R$ 10,00</option>
                              <option value="45659">Plano R$ 11,00</option>
                          </select>
                        </div>

I didn’t do it because I don’t know if that’s what you want but in case there are only these two hypotheses, and so you can’t move the value directly in the input #valor, can add the attribute disabled eastward input#valor