ساخت DropDownList های مرتبط به کمک jQuery Ajax در MVC
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: چهار دقیقه

در پروژه‌های زیادی با مواردی مواجه می‌شویم که دو انتخاب داریم ، و یک انتخاب زیر مجموعه انتخاب دیگر است ، مثلا رابطه بین استان‌ها و شهر‌ها ، در انتخاب اول استان انتخاب می‌شود و مقادیر DropDownList  شهر‌ها حاوی ، شهر‌های آن استان می‌شود.
در پروژه‌های WebForm  این کار به کمک Update Panel  انجام می‌شد ، ولی در پروژه‌های MVC  ما این امکان را نداریم و خودمان باید به کمک موارد دیگر این درخواست را پیاده سازی کنیم.
در پروژه ای که فعلا مشغول آن هستم ، با این مورد مواجه شدم ، و دیدم شاید بد نباشد راهکار خودم را با شما در میان بگذارم.
صورت مسئله :
کاربری نیاز به وارد کردن اطلاعات یک شیرالات بهداشتی  (Tap) را دارد ، از DropDownList   اول نوع آن شیر (Type)  را انتخاب می‌کند ، و از DropDownList  دوم ، که شامل گروه‌های آن نوع است ، گروه(Category) مورد نظر را انتخاب می‌کند. (در انتهای همین مطلب ببینید )
ساختار Table‌های دیتابیس به این صورت است: 

رابطه ای از جدول Type به جدول Category.

به کمک Scaffolding یک کنترلر برای کلاس Tap (شیر آب) می‌سازیم ، به طور عادی در فایل Create.chtml مقدار گروه را به صورت DropDown  نمایش می‌دهد، حال ما نیاز داریم که خودمان  DropDown را برای Type  ایجاد کنیم و بعد ارتباط این‌ها را بر قرار کنیم.

تابع اولی Create را این طوری ویرایش می‌کنیم :

        public ActionResult Create()
        {
            ViewBag.Type = new SelectList(db.Types, "Id", "Title");
            ViewBag.Category = new SelectList(db.Categories, "Id", "Title");
            return View();
        }

همان طور که مشخص است ، علاوه بر مقادیر Category  که خودش ارسال می‌کند ، ما نیز مقادیر نوع‌ها را به View  مورد نظر ارسال می‌کنیم.

برای نمایش دادن هر دو DropDownList ویو مورد نظر را به این صورت ویرایش می‌کنیم :

        <div>
            نوع
        </div>
        <div>
            @Html.DropDownList("Type", (SelectList)ViewBag.Type, "-- انتخاب ---", new { id = "rdbTyoe" })
            @Html.ValidationMessageFor(model => model.Category)
        </div>

        <div>
            دسته بندی
        </div>
        <div>
            @Html.DropDownList("Category", (SelectList)ViewBag.Category, "-- انتخاب ---", new { id = "rdbCategory"})
            @Html.ValidationMessageFor(model => model.Category)
        </div>

همان طور که مشاهده می‌کنید ، در اینجا  DropDownList  مربوط به Type که خودمان سمت سرور ،مقادیر آن را پر کرده بودیم نمایش می‌دهیم.

خب شاید تا اینجای کار ، ساده بود ولی میرسیم به اصل مطلب و ارتباط بین این دو DropDownList. (قبل از این قسمت حتما نگاهی به ساختار DropDownList یا همان تگ select بیندازید ، اطلاعات جی کوئری شما در این قسمت خیلی کمک حال شما است)

برای این کار ما از jQuery  استفادی می‌کنیم ، کار به این صورت است که هنگامی که مقدار DropDownList  اول تغییر کرد :

  •  ما Id  آن را به سرور ارسال می‌کنیم.
  •  در آنجا Category  هایی که دارای Type با Id  مورد نظر هستند را جدا می‌کنیم
  • فیلد‌های مورد نیاز یعنی Id  و Title را می‌گیریم
  • و بعد به کمک Json مقادیر را بر می‌گردانیم 
  • و مقادیر ارسالی از سرور را در option‌های DropDownList  دوم (گروه‌ها ) قرار می‌دهم 
در ابتدا متدی در سرور می‌نویسیم ، کار این متد (همان طور که گفته شد) گرفتن Id از نوع Type استو برگرداندن Category‌های مورد نظر. به این صورت :
        public ActionResult SelectCategory(int id)
        {
            var categoris = db.Categories.Where(m => m.Type1.Id == id).Select(c => new { c.Id, c.Title });
            return Json(categoris, JsonRequestBehavior.AllowGet);
        }
ابتدا به کمک Where مقادیر مورد نظر را پیدا می‌کنیم و بعد به کمک Select فیلد هایی مورد استفاده را جدا می‌کنیم و به کمک Json اطلاعات را بر می‌گردانیم. توجه داشته باشید که مقادیری که در categoris  قرار می‌گیرد ، شبیه به مقادیر json  هستند و ما می‌تانیم مستیما از این مقادیر در javascript استفاده کنیم. 
در کلایت (همان طور که گفته شد ) به این نیاز داریم که هنگاهی که مقدار در لیست اول تغییر کرد ، ای دی آن را به تابع بالا بفرستیم و مقادیر بازگشتی را در  DropDownList  دوم قرار دهیم : به این صورت :
            $('#rdbTyoe').change(function () {
                jQuery.getJSON('@Url.Action("SelectCategory")', { id: $(this).attr('value') }, function (data) {
                    $('#rdbCategory').empty();
                    jQuery.each(data, function (i) {
                        var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
                        $("#rdbCategory").append(option);
                    });
                });
            });
توضیح کد :
با کمک تابع .change() از تغییر مقدار آگاه می‌شویم ، و حالا می‌توانیم مراحل کار را انجام دهیم. حالا وقت ارسال اطلاعات ( Id مورد گزینه انتخاب شده در تغییر مقدار ) به سرور است که ما این کار را به کمک jQuery.getJSON انجام می‌دهیم ، در تابع callback باید کار مقدار دهی انجام شود.
به ازای رکورد هایی که برگشت شده است که حالا در data قرار دارد به کمک تابع each لوپ می‌رنیم و هربار این کار را تکرار می‌کنیم.
  • ابتدا یک تگ option می‌سازیم 
  • مقادیر مربوطه شامل Id که باید در attribute مورد نظر value قرار گیرد و متن آن که باید به عنوان text باشد را مقدار دهی می‌کنیم
  • option آماده شده را به DropDownList دومی (Category ) اضافه می‌کنیم.
توجه داشته باشید که هنگامی که کار دریافت اطلاعات با موفقیت انجام شد ، مقادیر داخل DropDownList  دومی ، مربوط به Category را به منظور بازیابی دوباره در  
$('#rdbCategory').empty(); 
خالی می‌کنیم.
نتیجه کار برای من می‌شود این :
قبل از انتخاب :

بعد از انتخاب :

موفق و پیروز باشید
  • #
    ‫۱۱ سال و ۱۲ ماه قبل، جمعه ۲۸ مهر ۱۳۹۱، ساعت ۰۲:۵۹
    خیلی خوب و جامع بود
  • #
    ‫۱۱ سال و ۱۲ ماه قبل، شنبه ۲۹ مهر ۱۳۹۱، ساعت ۱۸:۵۶
    مرسی مفید بود.
  • #
    ‫۱۱ سال و ۱۰ ماه قبل، سه‌شنبه ۲۱ آذر ۱۳۹۱، ساعت ۱۶:۳۲
    سلام
    ممنونم ، خیلی مطلب خوب مفیدی بود
    یکی بزرگترین مشکلات ما رو حل کردید ، ما از روش شما در چند پروژه استفاده کردیم.
  • #
    ‫۱۱ سال و ۹ ماه قبل، چهارشنبه ۶ دی ۱۳۹۱، ساعت ۱۶:۴۸
    سلام
    برای من کار نکرد. به عبارتی متد getjson اجرا نمی‌شد.
    تا قبل از متد jquery.getjson اجرا میشه. alert رو اجرا کرد. بعد دیگه اجرا نمیشه. تو firebug هم اساسا درخواستی json دیده نمیشه.
    jquery-1.8.3 
  • #
    ‫۱۱ سال و ۹ ماه قبل، چهارشنبه ۶ دی ۱۳۹۱، ساعت ۱۷:۴۰
    مشکلم حل شد. 
    متد اجرا می‌شد. ولی در قسمت کنترلر حالت چرخشی پیش می‌اومد که نمی‌تونه به json تبدیل بشه. با new حل شد.
    var Cities =from c in Cities
    Select new {Id=c.Id, Name=c.Name}; 
    return Json(Cities  , JsonRequestBehavior.AllowGet); 
    • #
      ‫۱۱ سال و ۹ ماه قبل، پنجشنبه ۷ دی ۱۳۹۱، ساعت ۱۳:۱۴
      بدون new هم می‌شه خروجی linq گرفت؟
      • #
        ‫۱۱ سال و ۹ ماه قبل، پنجشنبه ۷ دی ۱۳۹۱، ساعت ۱۳:۲۶
        بله، میشه خروجی گرفت. ولی همونطور که گفتم اگر آبجکت 1 به آبجکت 2 ارتباط داشته باشه و آبجکت 2 هم متقابلا از یک مسیر دیگه به آبجکت 1 ارتباط داشته باشه، در اینجا چرخه پیش میاد و json نمی‌تونه اون رو تبدیل کنه.
        بنابراین با new یک آبجکت مختصر برای خروجی تولید کردم که شامل خصوصیات دیگر که باعث چرخش می‌شوند نباشد.
        البته یه جایی خوندم در نگارش‌های جدید json.net حل شده این مشکل.
        موفق باشید
        • #
          ‫۱۱ سال و ۹ ماه قبل، پنجشنبه ۷ دی ۱۳۹۱، ساعت ۱۳:۴۴

          در مثال شما که نشانی از اشیاء تو در تو نیست. حتی در سؤال شما هم نبود. خروجی return json با اشیاء تو در تو مشکلی ندارد. فقط خروجی آن‌را باید بتوانید سمت کلاینت پردازش کنید.

          • #
            ‫۱۱ سال و ۹ ماه قبل، پنجشنبه ۷ دی ۱۳۹۱، ساعت ۱۳:۵۵
            اشیاء تو در تو با اشیاء چرخشی فرق میکنه دوست عزیز.  من گفتم خروجی جیسون با اشیاء چرخشی مشکل دارد. 
            • #
              ‫۱۱ سال و ۹ ماه قبل، پنجشنبه ۷ دی ۱۳۹۱، ساعت ۱۴:۱۳
              اون شیءایی که لینک دادی تو در تو هست و ارجاع حلقوی هم دارد. این نوع سؤال پرسیدن در کل صحیح نیست. افراد از راه دور که نمی‌تونن صفحه مونتیور شما رو مشاهده کنند. نه خطایی رو نوشتی و نه کلاس‌های مدلت مشخص بود.
  • #
    ‫۱۱ سال و ۸ ماه قبل، شنبه ۷ بهمن ۱۳۹۱، ساعت ۰۲:۳۷
    با تشکر 
    میشه درباره‌ی selector  این خط بیشتر توضیح بدبد 
    var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
    • #
      ‫۱۱ سال و ۸ ماه قبل، شنبه ۷ بهمن ۱۳۹۱، ساعت ۰۴:۳۷
      ببین دوست من ، ابتدا نگاهی به ساختار dropdown  لیست‌ها داشته باش.
      مقداری که باید توی dropdown نشان داده بشند چیزی به این صورته :
      <option value="value">Name</option>
      مقداری که به سرور ارسال می‌شه مقدار داخل value  هست و چیزی که نمایش داده می‌شه جای Name  قرار می‌گیره
      حالا ما ابن جا می‌خواهیم این قسمت‌ها رو خودمان درست کنیم.
      در یک حلقه each  به اضای مقادیری که از سرور گرفتیم loop  می زنیم option  را می‌سازیم و به dropdown  اضافه می‌کنیم.
      در مورد این قسمت هم باید بگم
      مثلا برای یک رکورد که داری ای دی 100 و عنوان AmirHossein  هست این option  اینطوری ساخته می‌شه:
      <option value="100">AmirHossein</option>

      • #
        ‫۱۱ سال و ۸ ماه قبل، شنبه ۷ بهمن ۱۳۹۱، ساعت ۲۲:۴۹
        مرسی از جواب کاملتون 
  • #
    ‫۱۱ سال و ۵ ماه قبل، جمعه ۶ اردیبهشت ۱۳۹۲، ساعت ۲۲:۱۵
    1- من dropdownlist رو درست کردم ولی لازمه که توی کنترلرم مقدارش رو بدونم تا بتونم توی دیتابیسم ذخیره کنم ... چه جوری بدونم مقدارش چیه؟ 
    2- با تگ input دوتا radio button درست کردم به مقدارهای این دو هم چه جوری از کنترلر دسترسی پیدا کنم (یعنی چطور متوجه شم که کاربر کودوم رو انتخاب کرده که براساس انتخابش باید توی جدولهای جداگونه ذخیره بشه )
    • #
      ‫۱۱ سال و ۵ ماه قبل، شنبه ۷ اردیبهشت ۱۳۹۲، ساعت ۰۲:۲۶
      سلام
      1 - به کامنت بالایی مراجعه کنید و ساختار DropDownList  رو مطالعه کنید. همان طور که می‌بینید مقداری که به سرور ارسال می‌شود همان مقدار داخل Value است.
      این شما هستید که DropDown رو می‌سازید، همان مقداری که در value  قرار می‌دهید ارسال می‌شود.
      2 -  برای این هم شما رو ارجاع می‌دم به ساختار Radio button .
      نمونه:
      <form>
      <input type="radio" name="sex" value="male">Male<br>
      <input type="radio" name="sex" value="female">Female
      </form>
      شما در این جا دو radio  دارید که دارای نام یکسال هستند و مقادیر Value  آن‌ها تفاوت دارد.
      در اینجا هم شما می‌توانید در کنترلر خود با name  ان radio  مقدار آن را در یافت کنید.
      به عنوان مثال شما در کنترلر یکی از مقدار‌های male و  female  را دریافت می‌کنید.
  • #
    ‫۱۱ سال و ۵ ماه قبل، شنبه ۱۴ اردیبهشت ۱۳۹۲، ساعت ۲۳:۱۷
    سلام
    من از SelectListItem ,linq استفاده کردم.در view هم ازSelectListItem  .ولی بقیه دقیقا مثل شما ولی جواب نمیده.مشکل چیه؟
    لطفا راهنمایی کنید
    • #
      ‫۱۱ سال و ۵ ماه قبل، یکشنبه ۱۵ اردیبهشت ۱۳۹۲، ساعت ۰۰:۰۱
      یه مطلب خوب در مورد دیباگ کدهای جی‌کوئری چند وقت پیش در سایت مطرح شده. شاید بتونه به شما در پیدا کردن مشکل کمک کنه.
      • #
        ‫۱۱ سال و ۵ ماه قبل، سه‌شنبه ۱۷ اردیبهشت ۱۳۹۲، ساعت ۱۹:۵۹
        من این کارو امتحان کردم مشکلی نداره.میدونید کلا کد جی کوئری من رو اجرا نمیکنه.با یک alert امتحان کردم.اگه کنترلر از نو scaffolding نباشه کار نمیکنه؟من زیاد بلد نیستم
        • #
          ‫۱۱ سال و ۵ ماه قبل، سه‌شنبه ۱۷ اردیبهشت ۱۳۹۲، ساعت ۲۱:۱۷
          این قسمت jQuery.getJSON رو با Url درستی مقدار دهی کردید؟ این آدرس رو باید بر اساس برنامه خودتون تغییر بدید.
    • #
      ‫۱۱ سال و ۵ ماه قبل، سه‌شنبه ۱۷ اردیبهشت ۱۳۹۲، ساعت ۲۱:۲۳
      سلام
      اگر امکان داره دقیق‌تر سوال رو بیان کنید و یا کدی که نوشتید ایتجا یگذارید.
      • #
        ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۰۶:۰۲
        سلام
        من از دو فیلد از 2 دیتابیس رو با دو dropdown نمایش دادم به صورت زیر:
         public ActionResult Create()
                {
                   Models.category cat = new Models.category();
                    List<SelectListItem> list = cat.GetList().Select(p => new SelectListItem { Text = p.category1, Value = p.ID.ToString() }).ToList();
        
                    list[0].Selected = true;
                    ViewData["Category1"] = list;
        
                    Models.subcategory subcat = new Models.subcategory();
        
        
                    List<SelectListItem> list1 = subcat.GetList().Select(p => new SelectListItem { Text = p.subcategory1, Value = p.ID.ToString() }).ToList();
        
                    list1[0].Selected = true;
                    ViewData["Category2"] = list1;
                 
                    return View();
                }
        -------------------------razor view-----------------------------------------------
          <div>
                  @{ List<SelectListItem> lstCategories = (List<SelectListItem>)ViewData["category1"]; }
                    @Html.DropDownList("dbcat", lstCategories, new { id="dbcat" })
                </div>
                <div>
                    @{ List<SelectListItem> lstsubCategories = (List<SelectListItem>)ViewData["Category2"]; }
                    @Html.DropDownList("dbsubcat", lstsubCategories, new { id="dbsubcat"})
        قسمت کنترلر برای ارتباط دو dropdownlist
         public ActionResult SelectCategory(int id)
                {
        
                  
                   studentDataContext  db= new studentDataContext();
                    var subcat = db.subcategories.Where(m => m.ID == id).Select(c => new
                    {
                        c.ID,
                        c.subcategory1
                    });
                    return Json(subcat, JsonRequestBehavior.AllowGet);
                }
        وقسمت کد جی کوئری:
          <script src="~/Scripts/jquery-1.7.1.min.js"></script> 
        <script type="text/javascript"> $('#dbcat').change(function () { jQuery.getJSON('@Url.Action("SelectCategory")', { id: $(this).attr('value') }, function (data) { $('#dbsubcat').empty(); jQuery.each(data, function (i) { var option = $('<option></option>') .attr("value", data[i].Id).text(data[i].Title); $("#dbcat").append(option); }); }); }); </script>

        قسمت کد جی کوئری من اجرا نمیشه.حتی alert داخل

        $('#dbcat').change(function ()
        گذاشتم اجرا نشد.لطفا راهنمایی کنید
        با تشکر

        • #
          ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۳:۴۳
          $(function () {
            // اینجا اسکریپت‌های جی‌کوئری باید تعریف شوند
          });
          قسمت کد جی‌کوئری رو باید در document ready قرار بدید
  • #
    ‫۱۱ سال و ۵ ماه قبل، یکشنبه ۲۹ اردیبهشت ۱۳۹۲، ساعت ۱۸:۵۸
    سلام ،با تشکر از آموزشهای فوق العاده تون از درس1 تا این قسمت‏ها
    من 2 ماهی هست که شروع کردم به یادگیری mvc و امروز رسیدم به این قسمت ، برنامه رو مثل شما نوشتم و یه کم مشکل دارم: قسمتی که باید dropdownList دوم که گروه است رو پر کنه کار نمی‌کنه! وارد کد jquery میشه و حتی متد SelectCategory رو هم فراخوانی میکنه اما dropdownList دومم رو خالی بر میگردونه!
    • #
      ‫۱۱ سال و ۵ ماه قبل، یکشنبه ۲۹ اردیبهشت ۱۳۹۲، ساعت ۱۹:۱۸
      Select(c => new { c.Id, c.Title })
      خروجی شما باید همین‌ها باشه در متد انتخاب گروه، البته مطابق کدهای جی‌کوئری نوشته شده
      • #
        ‫۱۱ سال و ۵ ماه قبل، یکشنبه ۲۹ اردیبهشت ۱۳۹۲، ساعت ۱۹:۴۰
        ممنونم از پاسختون؛ جواب داد (-:
  • #
    ‫۱۰ سال و ۱۱ ماه قبل، یکشنبه ۱۹ آبان ۱۳۹۲، ساعت ۰۶:۰۶
    با سلام
    من از کد زیر استفاده کردم تا موارد تکراری حذف بشه اما dropdown بدون value هست در  هر آیتمش.
    ViewBag.city = new SelectList(_db.regions.Select(r => r.region_main).Distinct(), "region_main");
    لطفا راهنمایی بفرمایید
    با تشکر
  • #
    ‫۱۰ سال و ۴ ماه قبل، پنجشنبه ۲۵ اردیبهشت ۱۳۹۳، ساعت ۱۵:۵۸
    با سلام؛ من شبیه همچین کاری می‌خوام انجام بدم با این تفاوت که وقتی با استفاده از dropdownlistFor یکی رو انتخاب می‌کنیم property مخصوص به اون سمت viewmodel نیز تغییر کنه.
    مکان dropdownlist خارج از beginform هستش و با binding ام وی سی مقدار set نمی‌شه.
    • #
      ‫۱۰ سال و ۴ ماه قبل، پنجشنبه ۲۵ اردیبهشت ۱۳۹۳، ساعت ۱۷:۱۱
      $('#dbcat').change(function () {
          var selectedItem = $(this).val();
          $.post( "-----url----", { item: selectedItem } );
      });
      + عنصر خارج از فرم را نمی‌شود توسط submit معمولی به سرور ارسال کرد؛ مگر اینکه از Ajax استفاده کنید و عناصر مورد نیاز را از قسمت‌های مختلف صفحه جمع‌آوری و به سرور ارسال کنید؛ مانند کدهای فوق. یا اینکه در رخداد change، یک فیلد مخفی داخل فرم را با مقدار value انتخابی مقدار دهی کنید. به این ترتیب چون این فیلد مخفی، داخل فرم هست، قابلیت ارسال به سرور را از طریق دکمه‌ی استاندارد و غیر Ajax ایی submit، خواهد یافت.
  • #
    ‫۱۰ سال و ۳ ماه قبل، پنجشنبه ۱۹ تیر ۱۳۹۳، ساعت ۱۸:۴۴
    یک تجربه : 
    این سلکتور $(this).attr('value')
    برای کار با value در Option نال برمیگردوند و من من اینجوری استفاده کردم
     $('#Cities').change(function () {                
                    jQuery.getJSON('@Url.Action("SelectTown")', { id: $(this).val() }, function (data) {
                        $('#Towns').empty();
                        jQuery.each(data, function (i) {
                            var option = $('<option></option>').val(data[i].ID).text(data[i].Name);
                            $("#Towns").append(option);
                        });
                    });
                });
    منظورم استفاده از .val به جای  .attr('value') هستش.
    نمیدونم شاید بخاطر نسخه جدیدتر Jquery هست.
  • #
    ‫۹ سال و ۹ ماه قبل، چهارشنبه ۳ دی ۱۳۹۳، ساعت ۱۲:۴۱
    با سلام؛ من راجب dropDown در پیج Edit.cshtml سوال دارم. چطور می‌تونم SelectedItem رو تنظیم کنم، منظورم اینکه وقتی صفحه ویرایش لود میشه، منوی کشویی روی هموم آیتمی باشه که کاربر قبلا وارد کرده و در داخل DataBase ذخیره شده.
    • #
      ‫۹ سال و ۹ ماه قبل، چهارشنبه ۳ دی ۱۳۹۳، ساعت ۱۲:۵۰
      از مقدار دهی چهارمین پارامتر SelectList برای تعیین selectedValue استفاده کنید:
      public SelectList(IEnumerable items, string dataValueField, string dataTextField, Object selectedValue)
      // in controller
      ViewBag.Countries = new SelectList(countries.GetCountries(), "id", "countryName", "82" /* selected id */);
      
      // in view
      @Html.DropDownListFor(model => model.CountryId, (IEnumerable<SelectListItem>)ViewBag.Countries, new { @class = "form-control" })
  • #
    ‫۹ سال و ۶ ماه قبل، دوشنبه ۱۰ فروردین ۱۳۹۴، ساعت ۱۰:۴۶
    وقت بخیر. امکانش هست دقیقا همین آموزش رو با استفاده از #asp.net C آموزش بدید؟ممنون میشم.
  • #
    ‫۹ سال و ۳ ماه قبل، چهارشنبه ۲۰ خرداد ۱۳۹۴، ساعت ۱۷:۰۴
    سلام و تشکر از آموزش خوبتون

    من به خوبی از این مورد استفاده می‌کنم فقط من از روش شما برای ۴ عدد dropdownlist استفاده می‌کنم ( استان > شهر > منطقه > محله ) مشکلم این هست که بعد از انتخاب استان تمامی شهر‌ها رو واسه من می‌آره ولی مثلا اولین شهرم که تهران هست داخل استان تهران مناطق رو نمی‌آره و حق هم داره چون ما در رویداد change گفتیم که این کارو بکنه اگر بخوام اولین گزینه لیست بعد از این انتخاب مثلا بعد از انتخاب استان که لیست شهرها می‌آن اولین گزینه --- انتخاب کنید --- باشه باید چکار کنم ؟

    با تشکر
    • #
      ‫۹ سال و ۳ ماه قبل، چهارشنبه ۲۰ خرداد ۱۳۹۴، ساعت ۲۰:۳۲
      در این حالت شما می‌تونید هنگام دریافت اطلاعات شهرها، اطلاعات مربوط به منطقه و محله رو نیز دریافت کنید:
      $(function (){
        $('#ostan').change(function () {
          jQuery.getJSON('shahrestan.json', { id: $(this).attr('value') }, function (data) {
              jQuery.each(data, function (i) {
                  var option = $('<option></option>').attr("value", data[i].Id).text(data[i].Title);
                  $("#shahrestan").append(option);
              });
          });
          jQuery.getJSON('mantaqeh.json', { id: $("#shahrestan").attr('value') }, function (man) {
              jQuery.each(man, function (i) {
                  var option = $('<option></option>').attr("value", man[i].Id).text(man[i].Title);
                  $("#mantaqeh").append(option);
              });
          });
          jQuery.getJSON('mahaleh.json', { id: $("#mantaqeh").attr('value') }, function (ma) {
              jQuery.each(ma, function (i) {
                  var option = $('<option></option>').attr("value", ma[i].Id).text(ma[i].Title);
                  $("#mahaleh").append(option);
              });
          });
      });
      });
      ساختار HTML هم باید همچین حالتی داشته باشه:
        <select id="ostan">
          <option>--انتخاب کنید--</option>
          <option value="1">کردستان</option>
        </select>
        <select id="shahrestan">
          <option>--انتخاب کنید--</option>
        </select>
        <select id="mantaqeh">
          <option>--انتخاب کنید--</option>
        </select>
        <select id="mahaleh">
          <option>--انتخاب کنید--</option>
        </select>