Метод val - получение и изменение текущего значения элементов с помощью jQuery
Метод val позволяет получать и изменять
текущее значение элемента.
Синтаксис
Так мы можем получить текущее значение первого элемента в наборе:
$(селектор).val();
Метод val в основном используется, чтобы
получать значения элементов формы, таких как:
input,
select
и textarea. Если
он вызван на пустой коллекции, то вернет undefined.
При работе с select с установкой атрибута
multiple, метод вернет массив значений каждого
выбранного option. Если ни один из них не выбран,
то вернется пустой массив. Так мы можем установить
значение каждого элемента в наборе. В качестве параметра можно
передавать строку, массив или число:
$(селектор).val(значение);
Применение функции к каждому элементу в наборе. Функция принимает первым параметром текущий номер в наборе, а вторым - его текущее значение:
$(селектор).val(имя атрибута, function(номер в наборе, текущее значение));
Пример
В следующем примере давайте получим значения, вводимые в инпут, и выведем их ниже в абзац:
<input type="text" value="text">
<p></p>
p {
color: green;
margin: 8px;
}
$('input').keyup(function() {
let value = $(this).val();
$('p').text(value);
}).keyup();
Пример
А теперь с помощью метода val мы будем
записывать значения кнопок, которые мы будем
нажимать, в расположенный ниже инпут:
<div>
<button>one</button>
<button>two</button>
<button>three</button>
<button>four</button>
</div>
<input type="text" value="click buttons">
button {
margin: 4px;
cursor: pointer;
}
input {
margin: 4px;
color: green;
}
$('button').click(function() {
let text = $(this).text();
$('input').val(text);
});