วิธี val

วิธี val ช่วยให้สามารถรับและเปลี่ยน ค่าปัจจุบันขององค์ประกอบ

ไวยากรณ์

นี่คือวิธีที่เราจะได้รับค่าปัจจุบันของ องค์ประกอบแรกในชุด:

javascript$(selector).val();

วิธี val ส่วนใหญ่ใช้เพื่อ รับค่าขององค์ประกอบฟอร์ม เช่น: input, select และ textarea หาก เรียกใช้บนคอลเลกชันที่ว่างเปล่า มันจะคืนค่า undefined เมื่อทำงานกับ select ที่มีการตั้งค่าแอตทริบิวต์ multiple วิธีจะคืนค่าเป็นอาร์เรย์ของค่าของแต่ละ option ที่เลือก หากไม่มีอันใดถูกเลือก จะคืนค่าอาร์เรย์ว่าง นี่คือวิธีที่เราสามารถตั้งค่า ค่าของแต่ละองค์ประกอบในชุด พารามิเตอร์ที่สามารถ ส่งได้คือสตริง อาร์เรย์ หรือตัวเลข:

javascript$(selector).val(value);

การนำฟังก์ชันไปใช้กับแต่ละองค์ประกอบในชุด ฟังก์ชัน รับพารามิเตอร์แรกเป็นหมายเลขปัจจุบันในชุด และ พารามิเตอร์ที่สองเป็นค่าปัจจุบันของมัน:

javascript$(selector).val(attribute name, function(index in set, current value));

ตัวอย่าง

ในตัวอย่างต่อไปนี้ มาดูกันว่าเราจะรับค่าที่ ป้อนลงในอินพุต และแสดงผลด้านล่างในย่อหน้า:

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);
});

ดูเพิ่มเติม