www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

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


نویسنده: وحید نصیری
تاریخ: ۱۳۸۸/۰۶/۳۰ ۱۸:۰۱:۰۰
آدرس: www.dntips.ir

در این مقاله مروری خواهیم داشت بر نحوه‌ی انجام یک سری از اعمال متداول با استفاده از 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


مطالب مشابه

نظرات

  • مهمان در ۱۳۸۸/۰۷/۰۱ ۰۰:۵۸:۲۲
    سلام

    جالب بود.
    آیا افزونه مناسب تری به جای SyntaxHighlighter سراغ ندارید. هم زمان بارگذاری را خیلی افزایش می‌دهد و هم اینکه در صورت لود ناقص صفحه، باعث بروز StackOverflow در IE میشود.(بارها پیش آمد)
  • وحید نصیری در ۱۳۸۸/۰۷/۰۱ ۰۱:۴۷:۵۶
    سلام،
    چرا 8 مورد دیگر هم هستند:
    http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/
    بعلاوه لایور رایتر مایکروسافت به همراه پلاگین copy as html برای VS.Net

    البته اگر منظور سایت جاری باشد این مشکل فکر نکنم به علت این syntax HL باشد، مشکل از اتمام پهنای باند سایت گوگل پیج است (خصوصا هنگام نمایش تصاویر صفحه از آن و یک سری بررسی جاوا اسکریپتی).
  • مهمان در ۱۳۸۸/۰۷/۰۳ ۱۷:۴۳:۵۹
    چقدر طول میکشه که با syntax این کتابخانه آشنا شویم.
    آیا همکاری با ماکروسافت و تلفیق با asp.net سینتکس آن با asp.net و MSAjax شبیه تر می شود؟(jquery فقط یک نوع syntax و روش برنامه نویسی دارد؟-چون آخه این syntax خیلی راحت بود،ولی نفهمیدم دلیل = در برنامه هاتون چی هست،مگه می خواییم مقداری را چاپ کنیم).
  • وحید نصیری در ۱۳۸۸/۰۷/۰۳ ۱۹:۳۹:۳۳
    - یک تا دو روز (و مسلما برای تکمیل بحث نیاز به مطالعه مقالات و کتاب می‌باشد که زمان‌بر است)
    - خیر.
    - دلیل استفاده از = :
    https://www.dntips.ir/2008/11/control-id-aspnet.html
  • مهمان در ۱۳۸۸/۰۷/۲۰ ۲۰:۵۰:۰۴
    سلام. مرسی بابت آموزش. عالی بود.
    چطوری میشه با radiobuttonlist این کارو انجام داد ؟
  • وحید نصیری در ۱۳۸۸/۰۷/۲۱ ۰۹:۴۳:۱۷
    سلام،
    می‌تونید از مقاله تعیین اعتبار یک checkBoxList با کمک jQuery کمک/ایده بگیرید:
    https://www.dntips.ir/2009/08/checkboxlist-jquery.html

    کنترل radiobuttonlist جزو اختراعات مایکروسافت است! به این صورت که هنگامیکه رندر می‌شود خروجی یک جدول است حاوی input و label استاندارد html .
    بر این اساس، پیدا کردن مقدار text و val آن به صورت زیر می‌تواند باشد:
    $("table#<%=RadioButtonList1.ClientID %> input:checked").val()
    $("table#<%=RadioButtonList1.ClientID %> input:checked").siblings("label").text()