Метод val

Метод val позволяет получать и изменять текущее значение элемента.

Синтаксис

Так мы можем получить текущее значение первого элемента в наборе:

javascript$(селектор).val();

Метод val в основном используется, чтобы получать значения элементов формы, таких как: input, select и textarea. Если он вызван на пустой коллекции, то вернет undefined. При работе с select с установкой атрибута multiple, метод вернет массив значений каждого выбранного option. Если ни один из них не выбран, то вернется пустой массив. Так мы можем установить значение каждого элемента в наборе. В качестве параметра можно передавать строку, массив или число:

javascript$(селектор).val(значение);

Применение функции к каждому элементу в наборе. Функция принимает первым параметром текущий номер в наборе, а вторым - его текущее значение:

javascript$(селектор).val(имя атрибута, function(номер в наборе, текущее значение));

Пример

В следующем примере давайте получим значения, вводимые в инпут, и выведем их ниже в абзац:

html<input type="text" value="text">
<p></p>

cssp {
  color: green;
  margin: 8px;
}

javascript$('input').keyup(function() {
  let value = $(this).val();
  $('p').text(value);
}).keyup();

Пример

А теперь с помощью метода val мы будем записывать значения кнопок, которые мы будем нажимать, в расположенный ниже инпут:

html<div>
  <button>one</button>
  <button>two</button>
  <button>three</button>
  <button>four</button>
</div>
<input type="text" value="click buttons">

cssbutton {
  margin: 4px;
  cursor: pointer;
}

input {
  margin: 4px;
  color: green;
}

javascript$('button').click(function() {
  let text = $(this).text();
  $('input').val(text);
});

Смотрите также