Манипуляциия над элементами

Мы уже познакомились с методом val(). Данный метод отлично работает практически со всеми элементами формы. Угу, практически, вот с <input type="radio"> установить значение таким образом не получится, тут потребуется небольшой workaround:

$("input[type=radio][name=sex][value=male]").prop("checked", true)

<label>
  <input type="radio" name="sex" value="male"/> Male
</label>
<label>
  <input type="radio" name="sex" value="female"/> Female
</label>

Можно, конечно же, использовать и метод click(), дабы эмулировать выбор необходимого пункта, но это вызовет все обработчики события «click», что не желательно.

С <input type="checkbox"> чуть-чуть попроще:

$("input[type=checkbox]").prop("checked", true)

<label>
  <input type="checkbox" name="remember"/> remember me
</label>

Проверяем «чекнутость» простым скриптом:

$("input[type=checkbox]").prop("checked")

Альтернативный, чуть более наглядный способ:

$("input[type=checkbox]").is(":checked")

Проверять и отправлять форму через AJAX теперь умеем, осталось решить вопрос с динамическим изменением формы. И для этого у нас уже есть все необходимые знания. Вот, к примеру, добавление выпадающего списка:

$("form").append('<select name="some"></select>');

А если потребуется изменить список?

<select name="role">
  <option value="admin">Admin</option>
  <option value="user">User</option>
</select>

Есть на все случаи жизни:

// возьмём список заранее, поберегу чернила
let $select = $("form select[name=role]");

// добавим новый элемент в выпадающий список
$select.append("<option value="manager">Manager</option>");

// выберем необходимый элемент
$select.val("manager");

// или по порядковому номеру, начиная с 0
$select.find("option:eq(1)").prop("selected", true);

// преобразуем в multiple
// не забываем, что имя такого селекта должно быть с [], т.е.
// myselect[], иначе сервер получит лишь одно значение
$select.attr("size",
    $select.find("option").length
);
$select.attr('multiple', true);

// очищаем список
$select.find("option").remove();

Вот так мы и расправились с «ужасными» формами. Возможно, я ещё приведу несколько примеров из реальной жизни, но это будет уже в последующих версиях данного учебника :)

PreviousСобытия Next90% Пишем свой плагин

Last updated 12 months ago

// возьмём список заранее, поберегу чернила let $select = $("form select[name=role]"); // добавим новый элемент в выпадающий список $select.append("<option value="manager">Manager</option>"); // выберем необходимый элемент $select.val("manager");

// преобразуем в multiple // не забываем, что имя такого селекта должно быть с [], т.е. // myselect[], иначе сервер получит лишь одно значение $select.attr("size", $select.find("option").length ); $select.attr('multiple', true);