val

« Обратно к странице атрибутов

[редактировать]

val( )

Получает содержимое атрибута value для первого элемента ввода в наборе.
Содержимое атрибута value может возвращаться для всех элементов ввода включая элементы выбора и текстовые области. В случае применения к элементам с возможностью выбора нескольких значений возвращается массив значений.
Что касается элементов select и checkbox — обратитесь к разделам о селекторах :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

Для более старых версий jQuery следует использовать функцию fieldValue из плагина jQueryForm.

Примеры:

Получает одно значение из выпадающего списка и массив значений из второго списка с возможностью выбора нескольких… вариантов, а затем отображает их.

    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();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(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>
Поиск значения поля ввода текста.
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>

  $(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>
Name Type

[редактировать]

val( значение )

Устанавливает значение атрибута value для каждого совпавшего элемента в наборе.
В jQuery версии 1.2 таким способом можно устанавливать значения элементов select.
Аргументы:

значение Строка
Значение, которое необходимо установить.
Примеры:

Установка значения поля ввода текста.
    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(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>
Name Type

[редактировать]

val( значение )

Может отмечать значение или делать выбор в таких элементах как radio, checkbox и select.
Аргументы:

значение Массив<Строка>
Набор значений, которые необходимо отметить/выбрать.
Примеры:

Установка значений элементов select.

    $("#single").val("Single2");
    $("#multiple").val(["Multiple2", "Multiple3"]);
    $("input").val(["check1","check2", "radio1" ]);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(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>
Name Type