วิธี val

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

ไวยากรณ์

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

$(selector).val();

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

$(selector).val(value);

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

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

ตัวอย่าง

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

<input type="text" value="text">
<p></p>

p {
	color: green;
	margin: 8px;
}

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

ตัวอย่าง

ตอนนี้ด้วยวิธี val เราจะ บันทึกค่าของปุ่มที่เรา กด ลงในอินพุตที่อยู่ด้านล่าง:

<div>
	<button>one</button>
	<button>two</button>
	<button>three</button>
	<button>four</button>
</div>
<input type="text" value="click buttons">

button {
	margin: 4px;
	cursor: pointer;
}

input {
	margin: 4px;
	color: green;
}

$('button').click(function() {
	let text = $(this).text();
	$('input').val(text);
});

ดูเพิ่มเติม

วิธี attr,
ซึ่งช่วยให้ทำงานกับแอตทริบิวต์ขององค์ประกอบได้
วิธี prop,
ซึ่งช่วยให้ทำงานกับคุณสมบัติขององค์ประกอบได้