۱۳۸۸/۰۶/۳۰

اعمال متداول با select (يا همان DropDownList / ComboBox) توسط jQuery


در اين مقاله مروري خواهيم داشت بر نحوه‌ي انجام يك سري از اعمال متداول با استفاده از 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>
1) بدست آوردن value آيتم انتخاب شده 

$("#<%=ddlTest.ClientID %>").val()
2) بدست آوردن text آيتم انتخاب شده

$("#<%=ddlTest.ClientID %> option:selected").text()
3) عكس العمل نشان دادن به انتخاب آيتم‌هاي مختلف 

   <script type="text/javascript">
       $(document).ready(function() {
           $("#<%=ddlTest.ClientID %>").change(function() {
               alert($("#<%=ddlTest.ClientID %>").val());
           });
       });   
   </script>
4) انتخاب يك آيتم از طريق برنامه نويسي

$("#<%=ddlTest.ClientID %>").val(2);
5) افزودن يك آيتم به ليست از طريق برنامه نويسي

$("<option value='6'>آيتم شش</option>").appendTo("#<%=ddlTest.ClientID %>");

6) خالي و حذف كردن تمامي آيتم‌ها

$("#<%=ddlTest.ClientID %>").html("");

و براي تكميل بحث مي‌توان به اين برگه مرجع مراجعه كرد:
jQuery – Select element cheat sheet


ارسال شده توسط وحيد نصيري در ۱۸:۰۱
برچسب‌ها: