اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب:
یک دقیقه
در این مقاله مروری خواهیم داشت بر نحوه‌ی انجام یک سری از اعمال متداول با استفاده از jQuery بر روی select استاندارد HTML. قبل از شروع به عنوان قالب کار، صفحه ساده‌ی زیر را در نظر بگیرید که از یک DropDownList استاندارد ASP.Net تشکیل شده است:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="select.aspx.cs" Inherits="TestJQueryAjax.select" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//...
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="ddlTest" runat="server">
<asp:ListItem Value="1">آیتم یک</asp:ListItem>
<asp:ListItem Value="2">آیتم دو</asp:ListItem>
<asp:ListItem Value="3">آیتم سه</asp:ListItem>
<asp:ListItem Value="4">آیتم چهار</asp:ListItem>
<asp:ListItem Value="5">آیتم پنج</asp:ListItem>
</asp:DropDownList>
</form>
</body>
</html>
$("#<%=ddlTest.ClientID %>").val()
$("#<%=ddlTest.ClientID %> option:selected").text()
<script type="text/javascript">
$(document).ready(function() {
$("#<%=ddlTest.ClientID %>").change(function() {
alert($("#<%=ddlTest.ClientID %>").val());
});
});
</script>
$("#<%=ddlTest.ClientID %>").val(2);
$("<option value='6'>آیتم شش</option>").appendTo("#<%=ddlTest.ClientID %>");
6) خالی و حذف کردن تمامی آیتم‌ها
$("#<%=ddlTest.ClientID %>").html("");
و برای تکمیل بحث می‌توان به این برگه مرجع مراجعه کرد:
jQuery – Select element cheat sheet
