Категории: Атрибуты jQuery > Значение
Описание: Получает текущее значение первого элемента в наборе соответствующих элементов.
.val()
Добавлена в версию: 1.0
Метод .val() используется главным образом для получения значений элементов формы. В случае элементов <select multiple="multiple">, метод .val() возвращает массив, включающий каждую выбранную опцию.
Для меню выбора и флажков, вы также можете использовать селекторы :selected и :checked для получения значений, например:
$('select.foo option:selected').val(); // get the value from a dropdown select
$('select.foo').val(); // get the value from a dropdown select even easier
$('input:checkbox:checked').val(); // get the value from a checked checkbox
$('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons
Примеры
Пример 1
Получает одно значение из выпадающего списка и массив значений из второго списка с возможностью выбора нескольких вариантов, а затем отображает их.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || []; $("p").html("<b>Single:</b> " + singleValues + " <b>Multiple:</b> " + multipleValues.join(", ")); } $("select").change(displayVals); displayVals(); }); </script> <style> p { color:red; margin:4px; } b { color:blue; } </style> </head> <body> <p></p> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select> </body> </html>
Пример 2
Поиск значения поля ввода текста.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("input").keyup(function () { var value = $(this).val(); $("p").text(value); }).keyup(); }); </script> <style> p { color:blue; margin:8px; } </style> </head> <body> <input type="text" value="some text"/> <p></p> </body> </html>
.val( значение )
Возвращает: jQuery
Описание: Устанавливает значение каждого элемента в наборе соответствующих элементов.
.val( значение )
Добавлена в версию: 1.0
значение
Текстовая строка или массив строк, которые необходимо установить в качестве значения свойства каждого соответствующего элемента.
.val( function(индекс, значение) )
Добавлена в версию: 1.4
function(индекс, значение)
Функция возвращающая значение в набор.
Этот метод обычно используется для установки значений полей формы.
Для элементов <select multiple="multiple">, множественные <option> могут быть выбраны последством передачи в массив.
Метод .val() позволяет нам установить значение с помощью отправки его в функцию. Начиная с jQuery 1.4, функция посылает два аргумента, текущий индекс элемента и текущее значение:
$('input:text.items').val(function(index, value) {
return value + ' ' + this.className;
});
Этот пример добавляет строку "items" к значениям текста ввода.
Примеры
Пример 1
Установка значения поля ввода текста.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("button").click(function () { var text = $(this).text(); $("input").val(text); }); }); </script> <style> button { margin:4px; cursor:pointer; } input { margin:4px; color:blue; } </style> </head> <body> <div> <button>Feed</button> <button>the</button> <button>Input</button> </div> <input type="text" value="click a button" /> </body> </html>
Пример 2
Установка значений элементов select. $("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check1","check2", "radio1" ]); }); </script> <style> body { color:blue; } </style> </head> <body> <select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" name="checkboxname" value="check1"/> check1 <input type="checkbox" name="checkboxname" value="check2"/> check2 <input type="radio" name="r" value="radio1"/> radio1 <input type="radio" name="r" value="radio2"/> radio2 </body> </html>
Была ли эта информация полезной?
