val()

תוכן:

val()
- .val()
val( value )
- .val( value )
- .val( function(index, value) )

.val()

תיאור: מקבל ערך נוכחי של אלמנט ראשון ברשימת אלמנטים בהתאמה.

.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

מקבל ערך יחיד מסלקטור רגיל ומערך ערכים מסלקטור רב בחירה ומציג ערכים האלה.

    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("Single: " + 
                  singleValues +
                  " Multiple: " + 
                  multipleValues.join(", "));
    }

    $("select").change(displayVals);
    displayVals();

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 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

מוצא ערך של שדה קלט

    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 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( value )

מחזירה: jQuery

תיאור: מגדיר ערך של כל אלמנט ברשימה של אלמנטים בהתאמה.

.val( value )

הוספה בגרסה: 1.0

value

מחרוזת

שורת טקסט או מערך שורות, שכדי להגדיר כי ערך של תכונה עבור כל אלמנט בהתאמה.

.val( function(index, value) )

הוספה בגרסה: 1.4

function(index, value)

פונקציה

פונקציה שמחזירה ערך לרשימה.

שיטה הזו בדרך כלל משמשת עבור הגדרת שדות של הטופס. עבור אלמנטים <select multiple="multiple">, רבים <option> ניתן לבחור באמצעות שליחה למערך.

שיטה .val() מאפשרת לנו להגדיר ערך באמצעות שליחתו לתוך הפונקציה. החל מ- jQuery 1.4, פונקציה שולחת שני ארגומנטים, אינדקס נוכחי של האלמנט וערך שלו הנוכחי:

$('input:text.items').val(function(index, value) {
  return value + ' ' + this.className;
});

דוגמה הזו מוסיפה מחרוזת "items" לערך טקסט הקלט.

דוגמאות

דוגמה 1

מגדיר ערך של שדה קלט.

    $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 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

מגדיר בחירה בודדת ובחירה מרובה.

    $("#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>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

val()

.val()

.val()

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

.val( value )

.val( value )

.val( function(index, value) )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

תגובות