ASP.NET กับ jQuery: เอา ข้อความ และ ค่า จาก DropDownList

แรงจูงใจ …

จะเอา ข้อความ/ค่า จาก item ที่เลือกจาก DropDownList มาทำอะไรบางอย่าง

เตรียมตัวให้พร้อม …

1. เพิ่ม form เข้าไปใน project ตั้งชื่อว่า GetTextAndValue.aspx

2. เพิ่มรหัส DropDownList แล้วเพิ่ม ListItem เข้าไปอีกเล็กน้อยเพื่อไว้เก็บ item ไว้ให้เลือก

<form id=”form1″ runat=”server”>
<div align=”center”>
<fieldset style=”width:400px;height:80px;”>
<p>ระดับห้องพักที่มีให้เลือก:</p>
<asp:DropDownList ID=”DropDownList1″ runat=”server”>
<asp:ListItem Text=”–กรุณาเลือก–” Value=””></asp:ListItem>
<asp:ListItem Text=”มาตรฐาน” Value=”1000″></asp:ListItem>
<asp:ListItem Text=”ระดับ Silver” Value=”2000″></asp:ListItem>
<asp:ListItem Text=”ระดับ Gold” Value=”3000″></asp:ListItem>
<asp:ListItem Text=”ระดับ Platinum” Value=”4000″></asp:ListItem>
</asp:DropDownList>
</fieldset>
</div>
<br />
<div align=”center” id=”message”></div>
</form>

3. ลอง run form GetTextAndValue ขึ้นมาจะมีหน้าตาคล้ายๆรูปข้างล่างนี้

วิธีทำ …

1. ที่รหัส jQuery ใน block ของ document.ready() เติมรหัส เลือกค้น DropDownList1 ขึ้นมาแล้วผูก(bind) ฟังชั่น(function)ของเรา กับเหตุการณ์(event) keyup change เข้าไป

$(‘select[id$=<%=DropDownList1.ClientID%>]’).bind(“keyup change”, function() {

2.ในุ block จาก 1 ให้ตรวสอบว่า ค่า(value) ของ ListItem ใน DropDownList นี้มี่ามั้ย ด้วยฟังชั่น val()

if ($(this).val() != “”)

3. เมื่อเงื่อนไขเป็นจริงจาก 2 ให้ สืบค้น message ที่อยู่ใน div ของเรา(ดู 2) ขึ้นมา โดยใช้ฟังชั่น text เพื่อแสดง ข้อความ(text) และ ค่า(value) ของ ListItem

$(‘#message’).text(“ห้อง: ” + $(this).find(“:selected”).text()
+ ‘ ค่าเช่าต่อคืน: ‘ + $(this).val());

4. ถ้า 2 เป็นเท็จ คือ val มีค่าว่าง ให้แสดงที่ message เป็นค่าว่าง

else
$(‘#message’).text(“”);
});
รหัส jQuery ที่เสร็จแล้วจะมีหน้าตา เหมือนข้างล่างนี้

<script type=”text/javascript”>
$(document).ready(function() {
$(‘select[id$=<%=DropDownList1.ClientID%>]’).bind(“keyup change”, function() {
if ($(this).val() != “”)
$(‘#message’).text(“ห้อง: ” + $(this).find(“:selected”).text()
+ ‘ ค่าเช่าต่อคืน: ‘ + $(this).val());
else
$(‘#message’).text(“”);
});
});
</script>

ทำงานอย่างไร …

ลอง run form ขึ้นมา แล้วลองเลือกที่ DropDownList สักอันหนึ่งดูครับ หน้าตาของ form ก็จะออกมาหน้าตาคล้ายๆ แบบข้างล่างนี้ครับ


ขอบคุณครับ

Advertisements

#asp-net, #jquery