Поменять значение Input при выборе select

141

27 мая 2019, 15:10

Всем привет есть такой input:

 <input type='hidden' name='oa' value=''>

Есть такой select

<select>
    <option value="15">15$ - 1 месяц</option>
    <option value="1">1$ - 1 день</option>
    <option value="4">4$ - 5 дней</option>
    <option value="7">7$ - 10 дней</option>
</select>

Как при выборе определенного select подставлялось значение в input посредством jQuery?

Answer 1

Можно следующим способом (для удобства добавил id селекту и поменял тип инпута с hidden на text):

$("#select").change(function(e) { 
  $("input[name='oa']").val(e.target.value); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<input type='text' name='oa' value=''> 
<select id='select'> 
  <option value="15">15$ - 1 месяц</option> 
  <option value="1">1$ - 1 день</option> 
  <option value="4">4$ - 5 дней</option> 
  <option value="7">7$ - 10 дней</option> 
</select>

Немного поясню: $("#select").change(function(e) {...}) - сработает на изменении селекта. Для ознакомления почитать можно тут: jQuery .change()

Строка кода: $("input[name='oa']") - получить элемент содержащий атрибут имени со значением oa. Для ознакомления почитать можно тут: jQuery: Attribute Contains Selector [name*=”value”]

Меняем значение у инпута с помощью .val(e.target.value);. Для ознакомления почитать можно тут: jQuery: .val()

Answer 2

Не мудрить и просто сделать:

<select name='oa'>
    <option value="15">15$ - 1 месяц</option>
    <option value="1">1$ - 1 день</option>
    <option value="4">4$ - 5 дней</option>
    <option value="7">7$ - 10 дней</option>
</select>