ASP.NET กับ jQuery: เพิ่มข้อมูลรายการสินค้าให้ DropDownList ได้ในขณะ runtime

แรงจูงใจ …

ที่หน้า form ตอนเลือก items อันแรก แล้วจะต้องเลือก items อันที่สองที่เป็น DropDownList ก็อยากเห็นเฉพาะ item ที่เกียวข้องกับ item แรกเท่านั้น ใน DropDownList

ถ้าแสดงหมดมันเยอะไป และมันไม่เกี่ยวอะไรกับ item ที่เลือกก่อนตอนแรกด้วย

เตรียมความพร้อม …

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

2. เติมตัวควบคุม DropDownList เข้าไป 2 ตัว ตัวแรกจะส่งผลต่อ items ใน DropDownList ตัวที่ 2

<form id=”form1″ runat=”server”>
<div align=”left”>
<fieldset style=”width:500px;height:150px;”>
<div id=”contentArea”>
<p>เลือกชื่อผู้แต่งตามความต้องการ:</p>
<table cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr><td>&nbsp;</td>
<td>
<asp:DropDownList ID=”DropDownList1″ runat=”server”>
<asp:ListItem Value=”” Text=”–กรุณาเลือก–“></asp:ListItem>
<asp:ListItem Value=”MF” Text=”Martin Fowler”></asp:ListItem>
<asp:ListItem Value=”RM” Text=”Robert C. Martin”></asp:ListItem>
<asp:ListItem Value=”DK” Text=”Donald E. Knuth”></asp:ListItem>
</asp:DropDownList>
</td></tr>
<tr><td colspan=”2″>&nbsp;</td></tr>
<tr><td>&nbsp;</td>
<td>
<asp:DropDownList ID=”DropDownList2″ runat=”server”>
<asp:ListItem Value=”” Text=”–กรุณาเลือก–“></asp:ListItem>
</asp:DropDownList>
</td></tr>
</table>
</div>
</fieldset>
</div>
</form>

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

วิธีทำ …

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

$(“select[id$=DropDownList1]”).bind(“change”, function() {

2. ใส่ตรรกะ(logic) ที่เอารายการจาก DropDownList2 ออกให้หมด เข้าไปในบร็อกฟังชั่น DropDownList1

$(“select[id$=DropDownList2] option”).remove();

3.เพิ่ม default item กรุณาเลือก เข้าไปที่ DropDownList2

$(“select[id$=DropDownList2]”).append(“<option value=”>–กรุณาเลือก–</option>”);

4.ใส่ logic ตรวจสอบเงื่อนไข ของ DropDownList1 แล้วเพิ่มรายการสิ้นค้าที่เกี่ยวข้องกับ item จาก DropDownList1 นี้ลงไปใน DropDownList2

if ($(this).val() == “MF”) {

$(“select[id$=DropDownList2]”).append(“<option value=’MF1′>Analysis Patterns: Reusable Object Models</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’MF2′>Patterns of Enterprise Application Architecture</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’MF3′>Domain-Specific Languages</option>”);
}
if ($(this).val() == “RM”) {

$(“select[id$=DropDownList2]”).append(“<option value=’RM1′>Agile Software Development, Principles, Patterns, and Practices</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’RM2′>Agile Principles, Patterns, and Practices in C#</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’RM3′>Clean Code: A Handbook of Agile Software Craftsmanship</option>”);
}
if ($(this).val() == “DK”) {

$(“select[id$=DropDownList2]”).append(“<option value=’DK1′>Art of Computer Programming, Volume 1: Fundamental Algorithms</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’DK2′>Art of Computer Programming, Volume 2: Seminumerical Algorithms</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’DK3′>Art of Computer Programming, Volume 3: Sorting and Searching</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’DK4′>Art of Computer Programming, Volume 4A: Combinatorial Algorithms</option>”);
}
});

เสร็จวิธีทำ code ของ jQuery ที่สมบูรณ์แล้ว มีหน้าตาแบบนี้

<script type=”text/javascript”>
$(document).ready(function() {
$(“select[id$=DropDownList1]”).bind(“change”, function() {
$(“select[id$=DropDownList2] option”).remove();
$(“select[id$=DropDownList2]”).append(“<option value=”>–กรุณาเลือก–</option>”);
if ($(this).val() == “MF”) {

$(“select[id$=DropDownList2]”).append(“<option value=’MF1′>Analysis Patterns: Reusable Object Models</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’MF2′>Patterns of Enterprise Application Architecture</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’MF3′>Domain-Specific Languages</option>”);
//$(“select[id$=DropDownList2]”).append($(“<option></option>”).val(“MA3”).html(“The Five People You Meet in Heaven”));
}
if ($(this).val() == “RM”) {

$(“select[id$=DropDownList2]”).append(“<option value=’RM1′>Agile Software Development, Principles, Patterns, and Practices</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’RM2′>Agile Principles, Patterns, and Practices in C#</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’RM3′>Clean Code: A Handbook of Agile Software Craftsmanship</option>”);
}
if ($(this).val() == “DK”) {

$(“select[id$=DropDownList2]”).append(“<option value=’DK1′>Art of Computer Programming, Volume 1: Fundamental Algorithms</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’DK2′>Art of Computer Programming, Volume 2: Seminumerical Algorithms</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’DK3′>Art of Computer Programming, Volume 3: Sorting and Searching</option>”);
$(“select[id$=DropDownList2]”).append(“<option value=’DK4′>Art of Computer Programming, Volume 4A: Combinatorial Algorithms</option>”);
}
});
});
</script>

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

ทดสอบ run form RuntimeDropDownList ขึ้นมา ลองเลือก item จาก DropDownList1 ก่อน เราจะสังเกตุเห็นว่า DropDownList2 จะมี items ให้เลือกได้แล้ว และขึ้นอยู่กับ item จาก DropDownList1 ดูรูปข้างล่าง

อีกนิดหน่อย …

code jQuery ข้างล่างนี้ เป็นอีกวิธีหนึ่งที่จะเพิ่ม item เข้าไปใน DropDownList ได้

$(“select[id$=DropDownList2]”).append($(“<option></option>”).val(“RM4”).html(“The Clean Coder: A Code of Conduct for Professional Programmers”));

ขอบคุณครับ

Advertisements

#asp-net, #jquery