در این مقاله قصد داریم یکی از مطالب بسیار مهم و کاربردی یعنی ایجاد لیست کشویی وابسته به هم در HTML که مربوط به مباحث برنامه نویسی سمت کاربر میشود را آموزش دهیم که بنده در سایت‌های فارسی، آموزش کاملی در این مورد پیدا نکردم.
ایجاد لیست کشویی وابسته به هم در HTML
خب حتماً در بسیاری از سایت‌ها (خصوصاً سایت‌های سازمانی) مشاهده کرده‌اید که چندین لیست کشویی، به هم وابسته هستند. برای مثال می‌توان به انتخاب استان و شهر اشاره کرد. اگر دقت کرده باشید در این مدل انتخاب‌ها چندین لیست کشویی (drop-down) که ما در زبان html با تگ select آنها را پیاده سازی می‌کنیم، وجود دارد که گزینه (option) آنها به انتخاب قبلی شما بستگی دارد.
نکته: در این مقاله هر جا گفته شد “لیست کشویی” بدانید که منظور همان drop-down در html است که با تگ select پیاده سازی میشود.
اگر در مورد همان انتخاب استان و شهر دقت کنیم، متوجه خواهیم شد که ابتدا باید استان موردنظر را از لیست کشویی اول انتخاب کنیم، و بعد شهرها در لیست کشویی دوم فعال می‌شوند و می‌توانیم شهر موردنظر هم انتخاب کنیم. (یعنی گزینه های لیست کشویی دوم که شهرها هستند به لیست کشویی اول که انتخاب استان است بستگی دارد، یا به عبارت دیگر وابسته است)
حالا سؤال اینجاست که این انتخاب‌ها چگونه کار می‌کنند و پیاده سازی می‌شوند؟ طبیعتاً از زبان html برای ایجاد لیست‌های کشویی مدنظرمان استفاده می‌کنیم (با استفاده از تگ select). سپس با استفاده از زبان شیرین جاوا اسکریپت تشخیص می‌دهیم که انتخاب اول کاربر چه گزینه‌ای هست و گزینه‌های مربوطه را در لیست کشویی بعدی ظاهر می‌کنیم.
خیلی نگران نباشید چون سعی کرده‌ایم به ساده‌ترین شکل ممکن کدها را نوشته و خط به خط توضیح دهیم (به غیر از اینکه در قسمت نظرات همین پست برای رفع مشکلات در خدمت شما هستیم!).
ایجاد select های وابسته به هم در HTML
توجه: در مثال زیر ما دو لیست کشویی داریم که در اولی سه مقدار Volvo، Volkswagen و BMW را قرار دادیم و کاربر وقتی هرکدام از این گزینه‌ها را انتخاب کند در لیست کشویی دوم چندین مدل از خودرو‌های آن شرکت ظاهر میشود.
قدم اول: ابتدا لیست های کشویی را مطابق کد زیر ایجاد می‌کنیم، دقت داشته باشید که فقط در select اول گزینه (option) وجود دارد و قرار است که در select دوم بسته به انتخاب شما در select اول گزینه‌ها بارگذاری شوند.
1
2
3
4
5
6
7
8
<select id="car"onchange="ChangeCarList()">
<option value="">--Car--</option>
<option value="VO">Volvo</option>
<option value="VW">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
<select id="carmodel"></select>
نکته: در select اول یک خصیصه به نام onchange وجود دارد که در واقع وقتی که کاربر گزینه‌ای را انتخاب می‌کند تابع درونش یعنی ()ChangeCarList که یک تابع جاوا اسکریپت هست فراخوانی میشود. (در ادامه متوجه خواهید شد که چرا این کار را انجام دادیم)
قدم دوم: حال باید کدهای جاوا اسکریپت را به کارمان اضافه کنیم. یعنی کدی که باعث وابستگی گزینه‌های select دوم به انتخاب کاربر در select اول میشود.
خط ۲ تا ۵: یک آرایه دو بعدی با نام carsAndModels تعریف می‌کنیم و کلید (key) هر خانه را برابر گزینه های select اول (نام کمپانی‌ها) قرار می‌دهیم و در مقدار (value) هر خانه مقادیری را که قصد داریم با انتخاب کلید (key) آن خانه در select اول، درون select دوم بارگذاری شوند را قرار می‌دهیم (مدل خودروها). (شاید برای افرادی که با جاوااسکریپت آشنایی ندارند درک کدهای بالا کمی سخت باشد ولی خب چاره‌ای نیست!)
خط ۷: تابعی که در خاصیت onchange لیست کشویی اول نوشتیم را اینجا تعریف می‌کنیم. در ادامه خواهیم گفت که درون این تابع چه خبر است!
خط ۸: لیست کشویی اول را انتخاب می‌کنیم و فعلاً داخل متغیر carList قرار می‌دهیم.
خط ۹: لیست کشویی دوم را انتخاب می‌کنیم و فعلاً داخل متغیر modelList قرار می‌دهیم.
خط ۱۰: مقدار گزینه‌ای که در حال حاضر در لیست کشویی اول (کمپانی‌ها) انتخاب شده را دریافت کرده و در متغیر selCar قرار می‌دهیم.
خط ۱۱ تا ۱۳: اگر از قبل گزینه‌ای داخل لیست کشویی دوم (مدل خودروها) قرار داشت، همه را حذف می‌کنیم.
خط ۱۴: مقادیر تعریف شده در خانه‌ی مربوط به گزینه انتخاب شده در لیست کشویی اول، را از آرایه carsAndModels می‌گیریم و در متغیر cars قرار می‌دهیم.
خط ۱۵: بررسی می‌کنیم که آیا گزینه‌ای برای این انتخاب تعریف شده یا خیر، اگر تعریف شده بود دستورات بعدی اجرا خواهند شد. (در واقع بررسی میشود که متغیر cars خالی نباشد)
خط ۱۶ تا ۲۰: با استفاده از یک حلقه for تمام مقادیری که از قبل در آرایه carsAndModels تعریف کرده بودیم را به‌صورت یک گزینه (option) در لیست کشویی دوم درج می‌کنیم و کاربر می‌تواند آنها را انتخاب کند.
نکته: می‌توانید بصورت آنلاین فرم بالا را از طریق کلیک روی دکمه زیر تست کنید و خودتان نتیجه را مشاهده کنید:
سلام اگه بخوایم value برای option های کشو دوم قرار بدیم، چه طور باید این کار رو انجام بدیم؟ برای ذخیره تو دیتابیس یعنی تو همین مثال بالا برای مدل ماشین(x5 m6 z3) مقدار بذاریم ممنون میشم جواب ام رو یکم سریع تر بدین چون تو سایت های دیگه پیدا نکردم و چند روز معطل همین قضیه ام،ممنون
سلام وقت بخیر نیازی به value نداره. اگر به تگ option خصیصه value ندید بصورت پیشفرض مقدار درونش بجای value ارسال میشه که می‌تونید در قسمت سرور دریافت و ذخیرش کنید.
سلام همانطور که با تغییرات لیست اول لیست دوم شروع به تغییر میکنه باید برای لیست سوم رو بر اساس تغییرات لیست دوم تنظیم کنید. کدش کمی متفاوت هستش اگر انگلیسی جستجو کنید نمونه کدهاشو پیدا میکنید.
سلام وقت بخیر چطوری میشه یک فیلد داخل یک لیست باکس رو تحت شرایطی مخفی یا disable کرد؟ به طور مثال یک لیست باکس دارم که ده تا فیلد داخلش هست میخوام تحت یه شرایطی خاصی یکی از اون فیلد ها غیر فعال بشه و کاربر نتونه انتخابش کنه یا مخفی بشه از دید کاربر.
سلام . مرسی که جواب میدید.. واقعا لطف دارید خواستم با پشتیبانی واتس اپ بفرستم ولی نشد… مجبور شدم این جا بفرستم که ظاهرا خوب ارسال نشده …اما یه توضیح میدم که متوجه بشید… تو body یک دیو به اسم d1 داریم که دیو اصلی ما هست. داخل این دیو یک جدول با آیدی t1 داریم که display :none داره و یک عکس به همین شکل مخفی هست. با ایدی p1 هست عکسه … حالا من وقتی تو لیست کشویی میزنم روی لیگ انگلیس ، باید جدول نمایش داده بشه ولی نمیشه … مشکل من همین جاست… ممنون بابت همکاری
البته اینو بگم که اول یک دیو درست کردم و بعد یک دیو با حالت display:none قرار دادم داخلش و بعد جدول رو گذاشتم داخل دیو ، دومی… هر کاری کردم دیو دوم fadeIn نشد …برا هر کدوم از دیو ها هم یک آیدی جدا گذاشتم( ولی اگه دیو اول نباشه ، دیو دوم fadeIn میشه … نمی دونم دلیلش چیه !!!)
سلام احسان جان احتمالا در انتخاب عنصر موردنظر مشکلی بوجود میاد که نمی‌تونه fadeIn کنه. متاسفانه درمورد این مورد خاص نمیشه یک مطلب جداگانه نوشت. اما اگر نتونستی انجام بدی می‌تونی کدتو به پشتیبانی واتساپ بفرستی تا سرفرصت بررسی کنم. موفق باشی
سلام خسته نباشید. مرسی از اینکه جواب دادید و تونستم باهاش چن تا کار خوب انجام بدم. فقط یه مشکل برام پیش اومد : من یک چیزی رو display:none گذاشتم و خواستم با انتخاب یکی از option ها ، به حالت display: block یا fadeIn در بیاد ولی متاسفانه به هر دری که زدم این اتفاق نیوفتاد …( یک جدول مثلا لیگ برتر انگلیس رو توی یک div به حالت مخفی گذاشتم و با انتخاب لیگ انگلیس خواستم نمایش بدم ولی نشد.) ممنون میشم اگه کمکم کنی …اگه میشه خودتون امتحان کنید کدشو بذارید توی سایت . ممنون میشم
سلام خسته نباشید. مرسی از آموزش خوب شما… من یک سوال دارم : توی سایت های ورزشی ( ورزش سه ) یک سری لیست های کشویی هست که وقتی یک گزینه از لیست کشویی را انتخاب می کنیم ، یک جدول یا یک رویداد رخ میده ( مثلا من از چن گزینه لیگ اسپانیا رو انتخاب می کنم و بعد جدول لیگ اسپانیا به نمایش در میاد … ) این کارو چجور باید انجام بدم ؟؟؟ با جی کویری و جاوااسکریپت و php اشنایی دارم ممنون میشم اگه جواب بدید:)
سلام احسان جان رویدادی وجود داره بنام onchange که می‌تونید ازش استفاده کنید تا هروقت کاربر یکی از مقادیر لیست کشویی رو انتخاب کرد اون رویداد فراخوانی بشه. حالا می‌تونید از این Event استفاده کنید برای نمایش دادن چیزی شبیه جدول یا هرچیز دیگه‌ای موفق باشید
با سلام و ارزوی سلامتی برای شما دوست عزیز بسیار سپاسگزارم از اموزشتون خیلی عالی بود اما من یک سئوال داشتم و اون اینکه اگر بخوام شهر انتخاب شده توسط کاربر رو به یک برگه و یا یک ادرس وصل کنم چیکار باید انجام بدم ممنون میشم
سلام مهرداد جان پردازش اطلاعات یک فرم و هدایت کاربر به یک آدرس دیگه، چیزی نیست که بتونم در یک کامنت توضیح بدم. راه‌های مختلفی داره. هم می‌تونی با استفاده از جاوااسکریپت اینکارو انجام بدی، هم با استفاده از یک زبان بک‌اند (مثل PHP). از هرکدوم بخوای استفاده کنی حداقل باید تا حد متوسط این زبان‌هارو بلد باشی. بنظرم اگر می‌خوای سریع کارت انجام بشه به یک برنامه‌نویس بسپار که اینکارو برات انجام بده. موفق باشی.
سلام خسته نباشید برای ثبت نام در سایت لیست کشویی گذاشتن ولی قبل از انتخاب استان حتما باید روی لیست کشویی شهر کلیک کنیم ( که خالی هست) تا لیست کشویی استان فعال بشه بعد از انتخاب استان دوباره برگردیم و شهر رو انتخاب کنیم میشه راهنمایی بفرمایید چطور این مشکل برطرف میشه
سلام امین جان در حالت عادی نباید به اینصورتی که شما گفتی باشه. یقیناً کدی وجود داره که این مشکل رو ایجاد میکنه، اگر از همین کدی که براتون گذاشتم استفاده میکنید احتمالا در نام‌گذاری selectها و یا گرفتن select ها در جاوااسکریپت اشتباه شده، اگر هم کدی هستش که از قبل نوشته شده باید در کدهای جاوااسکریپت بگردید و قسمتی که بدون هیچ رویدادی و در حالت عادی داره به select استان خصیصه disabled اضافه میکنه رو پیدا و حذف کنید.
با عرض سلام و خسته نباشید . لطفا بفرمایید برای اینکه کاربر بعد از انتخاب استان و شهر مورد نظر بلافاصله اطلاعات در مورد شهر انتخاب شده برایش با فشردن دکمه ای نمایان شود بر فرض مثال عکس های شهر مورد انتخاب برایش نمایش داده شود به چه صورت باید کد ها را نوشت و ارتباط برقرار کرد؟ با تشکر
سلام دوست عزیز باید با استفاده از زبان سمت سرور (PHP یا ASP یا …) با پایگاه داده ارتباط برقرار کنید و مشخصات مدنظرتون رو طبق اطلاعات گرفته شده از فرم، از پایگاه داده استخراج کنید. اگر به زبان سمت سرور و کار با پایگاه داده مسلط نیستید اینکارو به یک برنامه نویس تحت وب بسپارید. موفق باشید.
سلام دوست عزیز یک تگ select دیگه ایجاد کنید و کد جاوااسکریپت رو باید دوبار بنویسید. یک بار برای زمانی که select اول انتخاب شد. و یک بار هم برای زمانی که select دوم انتخاب شد.
سلام دوست عزیز درحال حاضر هم خودتون مقادیر لیست دوم رو تعیین میکنید. به آرایه‌ای که در ابتدای کد جاوااسکریپت اومده دقت کنید. اگر منظورتون اینه که از دیتابیس اطلاعات رو بخونید و اطلاعات ممکنه داینامیک باشند باید از AJAX کمک بگیرید.
میخواستم بپرسم که اگر بخواهیم کاربر بعد از انتخاب شهر،در مراجعه بعدی دوباره شهر رو انتخاب نکنه باید چکار کرد؟ مثل سایت دیوار که در اولین بازدید شهر مورد نظر انتخاب میشه،مثلا تهران در مراجعه بعدی به سایت،دیگر نیازی به انتخاب نیست و سایت روی تهران تنظیم شده
بسم الله الرحمن الرحیم سلام علی جان و تشکر برای سایت آموزشی خوبت. اگر بخواهیم با کلیک در تگ select یک فرم باز بشود و یک لیست آکارئونی را از php در این فرم قرار دهیم چگونه باید این کار راانجام داد .
سلام دوست عزیز. منظورتون از فرم رو دقیق متوجه نشدم چون بعدش گفتید لیست آکاردیونی. چون گفتید php احتمالا اطلاعات داینامیکی در دیتابیس دارید که می‌خواید اونهارو لود کنید. اگر حجم اون اطلاعات زیاد نیست می‌تونید همون اول اطلاعات رو لود کنید و اون لیست رو hidden کنید و بعدش با استفاده از جاوااسکریپت تعریف کنید که وقتی روی تگ select عمل focus انجام شد اون لیست مد نظر شما رو نمایش بده. اما اگر حجم اطلاعات زیاد هستش باید دقیقا زمان focus شدن تگ select با استفاده از Ajax اطلاعات رو از دیتابیس یا هرجای دیگه با استفاده از php بخونیم و لود کنیم. موفق باشید
سلام دوست عزیز. برای این کار دو راه وجود داره: ۱- مقادیرو از دیتابیس بخونید (مثلا با php) بعد اونهارو دقیقا به همین صورت که در آموزش هست در یک آرایه جاوااسکریپت قرار بدید. ۲- فقط مقادیر select اول رو از دیتابیس بخونید، و بعد دقیقا وقتی کاربر یکی از گزینه‌ها رو انتخاب کرد با استفاده از جی کوئری مقادیر گزینه‌های select دوم رو از دیتابیس بخونید.
بنده راه اول رو پیشنهاد می‌کنم. مگر در شرایط خاص. موفق باشید.
سلام . ممنون بابت اموزش خوبتون. یه راهنمایی ازتون میخواستم ممنون میشم اگر کمکم کنید . من میخوام که اول select 1 انتخاب بشه و بر اساس اون select۲ به نمایش دربیاد که تا اینجا توو اموزشتون بود .اما بعد از اینکه select2 لیستش به نمایش درامد ی توضیحاتی براساس دو انتخاب قبلی کاربر نمایش داده بشه . مثلا توو همین مثال اول bmw انتخاب بشه بعد m6 و بعد برا اساس این دو انتخاب یه متنی به نمایش دربیاد که درحالت عادی پنهانه . امیدوارم تونسته باشم که واضح منظورمو برسونم ممنون میشم راهنماییم کنید
سلام قسمت اول ایرادی نداره و در دیتابیس ثبت میشه اما قسمت دوم به صورت عدد در دیتابیس ثبت میشه لطفا راهنمایی کنید
سلام کد این مقاله ارتباطی با دیتابیس نداشت اطلاعات رو خودمون بهش دادیم به کمک ارایه یا obj و به کمک جاوا اسکریپت برای نمایشش شرط قرار دادیم.
ممنون واقعاا…مشکل ام کامل حل شد
ان شاالله همیشه موفق و پیروز باشید
سلام
اگه بخوایم value برای option های کشو دوم قرار بدیم، چه طور باید این کار رو انجام بدیم؟ برای ذخیره تو دیتابیس
یعنی تو همین مثال بالا برای مدل ماشین(x5 m6 z3) مقدار بذاریم
ممنون میشم جواب ام رو یکم سریع تر بدین چون تو سایت های دیگه پیدا نکردم و چند روز معطل همین قضیه ام،ممنون
سلام وقت بخیر
نیازی به value نداره. اگر به تگ option خصیصه value ندید بصورت پیشفرض مقدار درونش بجای value ارسال میشه که می‌تونید در قسمت سرور دریافت و ذخیرش کنید.
سلام ممنون به خاطر مقاله خوبتون
اگه 3 تا لیست رو بخوایم به هم مرتبط کنیم باید چه طوری انجام بشه؟
مثلا کشور استان شهر
سلام همانطور که با تغییرات لیست اول لیست دوم شروع به تغییر میکنه باید برای لیست سوم رو بر اساس تغییرات لیست دوم تنظیم کنید. کدش کمی متفاوت هستش اگر انگلیسی جستجو کنید نمونه کدهاشو پیدا میکنید.
سلام وقت بخیر
چطوری میشه یک فیلد داخل یک لیست باکس رو تحت شرایطی مخفی یا disable کرد؟
به طور مثال یک لیست باکس دارم که ده تا فیلد داخلش هست میخوام تحت یه شرایطی خاصی یکی از اون فیلد ها غیر فعال بشه و کاربر نتونه انتخابش کنه یا مخفی بشه از دید کاربر.
به کمک کدهای css متونید مخفی کنید. گزینه رو سلکت کنید و استایل display:none بدید.
سلام . مرسی که جواب میدید.. واقعا لطف دارید
خواستم با پشتیبانی واتس اپ بفرستم ولی نشد…
مجبور شدم این جا بفرستم که ظاهرا خوب ارسال نشده …اما یه توضیح میدم که متوجه بشید…
تو body یک دیو به اسم d1 داریم که دیو اصلی ما هست. داخل این دیو یک جدول با آیدی t1 داریم که display :none داره و یک عکس به همین شکل مخفی هست. با ایدی p1 هست عکسه … حالا من وقتی تو لیست کشویی میزنم روی لیگ انگلیس ، باید جدول نمایش داده بشه ولی نمیشه … مشکل من همین جاست…
ممنون بابت همکاری
سلام احسان جان
داخل یک فایل notepad کدتو بنویس و فایلشو به پشتیبانی واتساپ یا تلگرام ارسال کن. فرقی نمی‌کنه
البته اینو بگم که اول یک دیو درست کردم و بعد یک دیو با حالت display:none قرار دادم داخلش و بعد جدول رو گذاشتم داخل دیو ، دومی…
هر کاری کردم دیو دوم fadeIn نشد …برا هر کدوم از دیو ها هم یک آیدی جدا گذاشتم( ولی اگه دیو اول نباشه ، دیو دوم fadeIn میشه … نمی دونم دلیلش چیه !!!)
سلام احسان جان
احتمالا در انتخاب عنصر موردنظر مشکلی بوجود میاد که نمی‌تونه fadeIn کنه.
متاسفانه درمورد این مورد خاص نمیشه یک مطلب جداگانه نوشت. اما اگر نتونستی انجام بدی می‌تونی کدتو به پشتیبانی واتساپ بفرستی تا سرفرصت بررسی کنم.
موفق باشی
سلام خسته نباشید.
مرسی از اینکه جواب دادید و تونستم باهاش چن تا کار خوب انجام بدم. فقط یه مشکل برام پیش اومد :
من یک چیزی رو display:none گذاشتم و خواستم با انتخاب یکی از option ها ، به حالت display: block یا fadeIn در بیاد ولی متاسفانه به هر دری که زدم این اتفاق نیوفتاد …( یک جدول مثلا لیگ برتر انگلیس رو توی یک div به حالت مخفی گذاشتم و با انتخاب لیگ انگلیس خواستم نمایش بدم ولی نشد.)
ممنون میشم اگه کمکم کنی …اگه میشه خودتون امتحان کنید کدشو بذارید توی سایت . ممنون میشم
سلام خسته نباشید. مرسی از آموزش خوب شما…
من یک سوال دارم : توی سایت های ورزشی ( ورزش سه ) یک سری لیست های کشویی هست که وقتی یک گزینه از لیست کشویی را انتخاب می کنیم ، یک جدول یا یک رویداد رخ میده ( مثلا من از چن گزینه لیگ اسپانیا رو انتخاب می کنم و بعد جدول لیگ اسپانیا به نمایش در میاد … )
این کارو چجور باید انجام بدم ؟؟؟ با جی کویری و جاوااسکریپت و php اشنایی دارم
ممنون میشم اگه جواب بدید:)
سلام احسان جان
رویدادی وجود داره بنام onchange که می‌تونید ازش استفاده کنید تا هروقت کاربر یکی از مقادیر لیست کشویی رو انتخاب کرد اون رویداد فراخوانی بشه.
حالا می‌تونید از این Event استفاده کنید برای نمایش دادن چیزی شبیه جدول یا هرچیز دیگه‌ای
موفق باشید
با سلام و ارزوی سلامتی برای شما دوست عزیز بسیار سپاسگزارم از اموزشتون خیلی عالی بود اما من یک سئوال داشتم و اون اینکه اگر بخوام شهر انتخاب شده توسط کاربر رو به یک برگه و یا یک ادرس وصل کنم چیکار باید انجام بدم ممنون میشم
سلام مهرداد جان
پردازش اطلاعات یک فرم و هدایت کاربر به یک آدرس دیگه، چیزی نیست که بتونم در یک کامنت توضیح بدم. راه‌های مختلفی داره.
هم می‌تونی با استفاده از جاوااسکریپت اینکارو انجام بدی، هم با استفاده از یک زبان بک‌اند (مثل PHP). از هرکدوم بخوای استفاده کنی حداقل باید تا حد متوسط این زبان‌هارو بلد باشی.
بنظرم اگر می‌خوای سریع کارت انجام بشه به یک برنامه‌نویس بسپار که اینکارو برات انجام بده.
موفق باشی.
سلام خسته نباشید
برای ثبت نام در سایت لیست کشویی گذاشتن ولی قبل از انتخاب استان حتما باید روی لیست کشویی شهر کلیک کنیم ( که خالی هست) تا لیست کشویی استان فعال بشه بعد از انتخاب استان دوباره برگردیم و شهر رو انتخاب کنیم میشه راهنمایی بفرمایید چطور این مشکل برطرف میشه
سلام امین جان
در حالت عادی نباید به اینصورتی که شما گفتی باشه. یقیناً کدی وجود داره که این مشکل رو ایجاد میکنه، اگر از همین کدی که براتون گذاشتم استفاده میکنید احتمالا در نام‌گذاری selectها و یا گرفتن select ها در جاوااسکریپت اشتباه شده، اگر هم کدی هستش که از قبل نوشته شده باید در کدهای جاوااسکریپت بگردید و قسمتی که بدون هیچ رویدادی و در حالت عادی داره به select استان خصیصه disabled اضافه میکنه رو پیدا و حذف کنید.
با عرض سلام و خسته نباشید . لطفا بفرمایید برای اینکه کاربر بعد از انتخاب استان و شهر مورد نظر بلافاصله اطلاعات در مورد شهر انتخاب شده برایش با فشردن دکمه ای نمایان شود بر فرض مثال عکس های شهر مورد انتخاب برایش نمایش داده شود به چه صورت باید کد ها را نوشت و ارتباط برقرار کرد؟
با تشکر
سلام دوست عزیز
باید با استفاده از زبان سمت سرور (PHP یا ASP یا …) با پایگاه داده ارتباط برقرار کنید و مشخصات مدنظرتون رو طبق اطلاعات گرفته شده از فرم، از پایگاه داده استخراج کنید.
اگر به زبان سمت سرور و کار با پایگاه داده مسلط نیستید اینکارو به یک برنامه نویس تحت وب بسپارید.
موفق باشید.
با سلام و خسته نباشید
اگر بخواهیم بیش از 2 لیست وابسته داشته باشیم چطور میشه؟
مثلا کشور ، استان ، شهر ، منطقه و …
سلام دوست عزیز
یک تگ select دیگه ایجاد کنید و کد جاوااسکریپت رو باید دوبار بنویسید. یک بار برای زمانی که select اول انتخاب شد. و یک بار هم برای زمانی که select دوم انتخاب شد.
سلام ممنون از مطالب مفیدتون من میخوام مقدار value لیست دوم خودم تعیین کنم مثلا الان از صفر شروع میشه خودم تعیین کنم
چطوری باید این کار رو بکنم
سلام دوست عزیز
درحال حاضر هم خودتون مقادیر لیست دوم رو تعیین میکنید. به آرایه‌ای که در ابتدای کد جاوااسکریپت اومده دقت کنید.
اگر منظورتون اینه که از دیتابیس اطلاعات رو بخونید و اطلاعات ممکنه داینامیک باشند باید از AJAX کمک بگیرید.
ممنون
یاعلی
به نام خدا
سلام
ممنون از مطالب مفیدترین
میخواستم بپرسم که اگر بخواهیم کاربر بعد از انتخاب شهر،در مراجعه بعدی دوباره شهر رو انتخاب نکنه باید چکار کرد؟
مثل سایت دیوار که در اولین بازدید شهر مورد نظر انتخاب میشه،مثلا تهران
در مراجعه بعدی به سایت،دیگر نیازی به انتخاب نیست و سایت روی تهران تنظیم شده
سلام دوست عزیز
راجع به cookie و session در php تحقیق کنید. امیدوارم به جواب سوالتون برسید.
بسم الله الرحمن الرحیم
سلام علی جان و تشکر برای سایت آموزشی خوبت.
اگر بخواهیم با کلیک در تگ select یک فرم باز بشود و یک لیست آکارئونی را از php در این فرم قرار دهیم چگونه باید این کار راانجام داد .
سلام دوست عزیز.
منظورتون از فرم رو دقیق متوجه نشدم چون بعدش گفتید لیست آکاردیونی.
چون گفتید php احتمالا اطلاعات داینامیکی در دیتابیس دارید که می‌خواید اونهارو لود کنید. اگر حجم اون اطلاعات زیاد نیست می‌تونید همون اول اطلاعات رو لود کنید و اون لیست رو hidden کنید و بعدش با استفاده از جاوااسکریپت تعریف کنید که وقتی روی تگ select عمل focus انجام شد اون لیست مد نظر شما رو نمایش بده.
اما اگر حجم اطلاعات زیاد هستش باید دقیقا زمان focus شدن تگ select با استفاده از Ajax اطلاعات رو از دیتابیس یا هرجای دیگه با استفاده از php بخونیم و لود کنیم.
موفق باشید
با عرض سلام اگر هر دو لیست به صورت داینامیک و از دیتابیس پر شده باشند کد جاوا اسکریپت را چگونه باید بنویسیم
ممنون
سلام دوست عزیز.
برای این کار دو راه وجود داره:
۱- مقادیرو از دیتابیس بخونید (مثلا با php) بعد اونهارو دقیقا به همین صورت که در آموزش هست در یک آرایه جاوااسکریپت قرار بدید.
۲- فقط مقادیر select اول رو از دیتابیس بخونید، و بعد دقیقا وقتی کاربر یکی از گزینه‌ها رو انتخاب کرد با استفاده از جی کوئری مقادیر گزینه‌های select دوم رو از دیتابیس بخونید.
بنده راه اول رو پیشنهاد می‌کنم. مگر در شرایط خاص.
موفق باشید.
سلام . ممنون بابت اموزش خوبتون. یه راهنمایی ازتون میخواستم ممنون میشم اگر کمکم کنید . من میخوام که اول select 1 انتخاب بشه و بر اساس اون select۲ به نمایش دربیاد که تا اینجا توو اموزشتون بود .اما بعد از اینکه select2 لیستش به نمایش درامد ی توضیحاتی براساس دو انتخاب قبلی کاربر نمایش داده بشه . مثلا توو همین مثال اول bmw انتخاب بشه بعد m6 و بعد برا اساس این دو انتخاب یه متنی به نمایش دربیاد که درحالت عادی پنهانه . امیدوارم تونسته باشم که واضح منظورمو برسونم ممنون میشم راهنماییم کنید
نیاز به نوشتن جی‌کوئری داره و متاسفانه از نظرذ حجم توضیحات و کد امکانش نیست در قالب یه کامنت پاسخ داده بشه.