ایجاد لیست های کشویی استان و شهرهای هر استان

**ROSTAM2** · چهارشنبه 19 اردیبهشت 1403, 10:54 صبح

سلام

برای ایجاد لیست های کشویی استان و شهرهای هر استان من اومدم از برای شهرهای هر استان یک لیست کشویی ساختم که تعدادشون برابر با تعداد استان های موجود در لیست کشویی اول می باشد که با انتخاب هر استان از لیست کشویی اول لیست کشویی شهرهای مرتبط با اون استان نمایش داده می شه و لیست کشویی ثبلی نمایان شده مخفی می شه....

Annotation 2024-05-08 101818.jpg

این لیست کشویی استانهاست:

Annotation 2024-05-08 102239.jpg



                            <label style="display: block">

                                استان:</label>

                            <select id="state" class="fieldText" style="width: auto; position: relative;" onchange="return state_onchange()">

                                <!-- <optgroup label="استان ها">-->

                                <option value="آذربایجان شرقی">آذربایجان شرقی</option>

                                <option value="آذربایجان غربی">آذربایجان غربی</option>

                                <option value="اردبیل">اردبیل</option>

                                <option value="اصفهان">اصفهان</option>

                                <option value="البرز">البرز</option>

                                <option value="ایلام">ایلام</option>

                                <option value="بوشهر">بوشهر</option>

                                <option value="تهران">تهران</option>

                                <option value="چهارمحال و بختیاری">چهارمحال و بختیاری</option>

                                <option value="خراسان جنوبی">خراسان جنوبی</option>

                                <option value="خراسان رضوی">خراسان رضوی</option>

                                <option value="خراسان شمالی">خراسان شمالی</option>

                                <option value="خوزستان">خوزستان</option>

                                <option value="زنجان">زنجان</option>

                                <option value="سمنان">سمنان</option>

                                <option value="سیستان و بلوچستان">سیستان و بلوچستان</option>

                                <option value="فارس">فارس</option>

                                <option value="قزوین">قزوین</option>

                                <option value="قم">قم</option>

                                <option value="کردستان">کردستان</option>

                                <option value="کرمان">کرمان</option>

                                <option value="کرمانشاه">کرمانشاه</option>

                                <option value="کهگیلویه و بویراحمد">کهگیلویه و بویراحمد</option>

                                <option value="گلستان">گلستان</option>

                                <option value="گیلان">گیلان</option>

                                <option value="لرستان">لرستان</option>

                                <option value="مازندران">مازندران</option>

                                <option value="مرکزی">مرکزی</option>

                                <option value="هرمزگان">هرمزگان</option>

                                <option value="همدان">همدان</option>

                                <option value="یزد">یزد</option>

                                <!--</optgroup>-->

                            </select>

این هم رویدادش در اسکرپت:



   <script language="javascript" type="text/javascript">

// <=!=[=C=D=A=T=A=[

        var SelectedState;

        function state_onchange() {

            var index = state.selectedIndex;

            if (SelectedState != null) {

                SelectedState.setAttribute("hidden", "hidden");

            }

            switch (index) {

                case 0: SelectedState = select1;

                    break;

                case 1: SelectedState = select2;

                    break;

                case 2: SelectedState = select3;

                    break;

                case 3: SelectedState = select4;

                    break;

                case 4: SelectedState = select5;

                    break;

                case 5: SelectedState = select6;

                    break;

                case 6: SelectedState = select7;

                    break;

                case 7: SelectedState = select8;

                    break;

                case 8: SelectedState = select9;

                    break;

                case 9: SelectedState = select10;

                    break;

                case 10: SelectedState = select11;

                    break;

                case 11: SelectedState = select12;

                    break;

                case 12: SelectedState = select13;

                    break;

                case 13: SelectedState = select14;

                    break;

                case 14: SelectedState = select15;

                    break;

                case 15: SelectedState = select16;

                    break;

                case 16: SelectedState = select17;

                    break;

                case 17: SelectedState = select18;

                    break;

                case 18: SelectedState = select19;

                    break;

                case 19: SelectedState = select20;

                    break;

                case 20: SelectedState = select21;

                    break;

                case 21: SelectedState = select22;

                    break;

                case 22: SelectedState = select23;

                    break;

                case 23: SelectedState = select24;

                    break;

                case 24: SelectedState = select25;

                    break;

                case 25: SelectedState = select26;

                    break;

                case 26: SelectedState = select27;

                    break;

                case 27: SelectedState = select28;

                    break;

                case 28: SelectedState = select29;

                    break;

                case 29: SelectedState = select30;

                    break;

                case 30: SelectedState = select31;

                    break;

                default:

            }

            SelectedState.removeAttribute("hidden");

        }





        function window_onload() {

            SelectedState = select1;

        }





// ]=]=>

    </script>

**ROSTAM2** · چهارشنبه 19 اردیبهشت 1403, 11:01 صبح

چون من از HTML در Windows Forms استفاده می کنم یک راه دیگری ک برام امکان پذیره اضافه کردن شهرهای هر استان بصورت جداگانه در یک آرایه است که بتونم با رویداد onChange از لیست کشویی استان ها لیست کشویی شهرهای استان رو با عناصر آرایه شهرهای همون استان ایجاد کنم که تو این روش تنها دو تا لیست کشویی بیشتر نیاز نیست که ممکنه دیزاین رو خلوت کنه اما کار کدنویسی رو زیاد می کنه.....

Annotation 2024-05-08 103700.jpg

من نمی خوام برای استان ها و شهرها از دیتابیس استفاده کنم، پس ب راه هایی نیاز هست که با اسکریپت و کدنویسی سرو کار داره....

راهنمایی برای روش بهتر و ساده تر ....

با تشکر.

**ROSTAM2** · چهارشنبه 19 اردیبهشت 1403, 14:01 عصر

یک روشی برای Windows Forms که نیاز به Script و اضافه کردن لیست های کشویی متعدد به HTML نداره:

سوال فنی در مورد نرم افزار حسابداری!! (پست شماره 19)

**mazoolagh** · پنج شنبه 20 اردیبهشت 1403, 21:40 عصر

من نمی خوام برای استان ها و شهرها از دیتابیس استفاده کنم، پس ب راه هایی نیاز هست که با اسکریپت و کدنویسی سرو کار داره....

راهنمایی برای روش بهتر و ساده تر ....

سلام و روز خوش

شما میتونین دیتا رو به صورت JSON یا array تعریف کنین و این هم میتونه در یک فایل جدا از فایل html شما باشه.

من برای ساخت این دیتا از یک دیتابیس تقسیم بندی کشوری سال 1401 کمک میگیرم.

دیتا که من دارم به این شکل هست که تقسیم بندی به صورت:
1- استان
2- شهرستان
3- بخش
4- شهر یا دهستان
5- آبادی/روستا (فقط اگر سطح 4 دهستان باشه)
انجام شده و برای هر سطح هم جدول جدا داریم (جدول hierarchical هم درست کردم که اینجا فعلا به اون کاری نداریم)

حالا فرض کنین که فقط اطلاعات 4 سطح نیاز هست:

USE IRAN;



SELECT 

    States.State , States.StateID,

    Counties.County , Counties.CountyID,

    Districts.District , Districts.DistrictID,

    Cities.City , Cities.CityID

FROM States 

    INNER JOIN Counties    ON States.StateID=Counties.StateID

    INNER JOIN Districts ON Counties.CountyID=Districts.CountyID

    INNER JOIN Cities ON Districts.DistrictID=Cities.DistrictID 

ORDER BY States.State, Counties.County, Districts.District, Cities.City

Screenshot 2024-05-09 204441.png
که این شکل دیتا در جاوااسکریپت قابل استفاده نیست،
پس:

USE IRAN;



SELECT 

    States.State , States.StateID,

    Counties.County , Counties.CountyID,

    Districts.District , Districts.DistrictID,

    Cities.City , Cities.CityID

FROM States 

    INNER JOIN Counties    ON States.StateID=Counties.StateID

    INNER JOIN Districts ON Counties.CountyID=Districts.CountyID

    INNER JOIN Cities ON Districts.DistrictID=Cities.DistrictID 

ORDER BY States.State, Counties.County, Districts.District, Cities.City





FOR JSON AUTO

Screenshot 2024-05-09 205534.png

حالا این خروجی رو به عنوان یک متغیر جاوااسکریپت در یک فایل میریزیم (data.js)؛
به این ترتیب دیتا رو از html جدا میکنیم و دیگه کمبوهای ما hardcode نیست،
و این از بابت نگهداری و ویرایش های بعدی بسیار سودمند هست.
Screenshot 2024-05-09 210147.png

یا اگر بخواهیم pretty میکنیم (تاثیری در کار نداره و اینجا برای خوانایی انجام شده):
Screenshot 2024-05-09 210433.png

**mazoolagh** · پنج شنبه 20 اردیبهشت 1403, 22:10 عصر

برای نمایش روش کار یک فایل html ساده با 4 کمبو درست میکنیم:

<body>

    <form id="form1" action="">

        <div id="fields">

            <label for="cb_State">استان:</label>

            <select id="cb_State">

                <option value="-1">----</option>

            </select>

            <label for="cb_County">شهرستان:</label>

            <select id="cb_County">

                <option value="-1">----</option>

            </select>

            <label for="cb_District">بخش:</label>

            <select id="cb_District">

                <option value="-1">----</option>

            </select>

            <label for="cb_City">شهر:</label>

            <select id="cb_City">

                <option value="-1">----</option>

            </select>

            <label></label>

            <input type="submit" value="Submit">

        </div>

    </form>

</body>

و کدهای جاوااسکریپت رو اضافه میکنیم:

    <script src="data.js"></script> 

   <script>

        var Counties;  // شهرستانها

        var Districts; // بخشها

        var Cities;    // شهرها



window.onload = function () {

            States.forEach(function (x) {

                cb_State.add(new Option(x.State, x.StateID));

            });

            cb_State.selectedIndex = 0;



cb_State.onchange = function () {

                cb_County.length = 1;

                cb_District.length = 1;

                cb_City.length = 1;

                var selected_StateID = this.value;

                if (selected_StateID !== '-1') {

                    Counties = States.find(x => x.StateID == selected_StateID).Counties;

                    Counties.forEach(function (x) {

                        cb_County.add(new Option(x.County, x.CountyID));

                    });

                };

            };



            cb_County.onchange = function () {

                cb_District.length = 1;

                cb_City.length = 1;

                var selected_CountyID = this.value;

                if (selected_CountyID !== '-1') {

                    Districts = Counties.find(x => x.CountyID == selected_CountyID).Districts;

                    Districts.forEach(function (x) {

                        cb_District.add(new Option(x.District, x.DistrictID));

                    });

                };

            };



            cb_District.onchange = function () {

                cb_City.length = 1;

                var selected_DistrictID = this.value;

                if (selected_DistrictID !== '-1') {

                    Cities = Districts.find(x => x.DistrictID == selected_DistrictID).Cities;

                    Cities.forEach(function (x) {

                        cb_City.add(new Option(x.City, x.CityID));

                    });

                };



            };

        };

    </script>

فایل پیوست شامل demo.html با 4 کمبو آبشاری و data.js با اطلاعات زیر هست:
31 استان
474 شهرستان
1163 بخش
1431 شهر

**mazoolagh** · پنج شنبه 20 اردیبهشت 1403, 22:24 عصر

اگر فقط اطلاعات استان/شهر نیاز باشه:

USE IRAN;



SELECT 

    States.State , States.StateID,

    Cities.City , Cities.CityID

FROM States 

    INNER JOIN Cities ON Cities.StateID=States.StateID 

ORDER BY States.State, Cities.City



FOR JSON AUTO

Screenshot 2024-05-09 215827.png

    <script src="data.js"></script> 

   <script>

        var Cities;    // شهرها





        window.onload = function () {

            States.forEach(function (x) {

                cb_State.add(new Option(x.State, x.StateID));

            });

            cb_State.selectedIndex = 0;





            cb_State.onchange = function () {

                cb_City.length = 1;

                var selected_StateID = this.value;

                if (selected_StateID !== '-1') {

                    Cities = States.find(x => x.StateID == selected_StateID).Cities;

                    Cities.forEach(function (x) {

                        cb_City.add(new Option(x.City, x.CityID));

                    });

                };

            };

        };

    </script>

**mazoolagh** · پنج شنبه 20 اردیبهشت 1403, 22:55 عصر

یک نکته مهم این هست که بطور متعارف value کمبوها باید ID باشه،
که در این نمونه ها رعایت شده.

نکته دیگه این هست که برای کاهش حجم دیتا فایل data.js میتونیم اون رو به صورت یک ارایه معمولی دربیاریم:
Screenshot 2024-05-09 221213.png

در این صورت کد جاوااسکریپ رو باید به شکل زیر تغییر بدیم:

    <script src="data.js"></script> 

   <script>

        var Counties;  // شهرستانها

        var Districts; // بخشها

        var Cities;    // شهرها





        window.onload = function () {

            States.forEach(function (x) {

                cb_State.add(new Option(x[0], x[1]));

            });

            cb_State.selectedIndex = 0;





            cb_State.onchange = function () {

                cb_County.length = 1;

                cb_District.length = 1;

                cb_City.length = 1;

                var selected_StateID = this.value;

                if (selected_StateID !== '-1') {

                    Counties = States.find(x => x[1] == selected_StateID)[2];

                    Counties.forEach(function (x) {

                        cb_County.add(new Option(x[0], x[1]));

                    });

                };

            };





            cb_County.onchange = function () {

                cb_District.length = 1;

                cb_City.length = 1;

                var selected_CountyID = this.value;

                if (selected_CountyID !== '-1') {

                    Districts = Counties.find(x => x[1] == selected_CountyID)[2];

                    Districts.forEach(function (x) {

                        cb_District.add(new Option(x[0], x[1]));

                    });

                };

            };



            cb_District.onchange = function () {

                cb_City.length = 1;

                var selected_DistrictID = this.value;

                if (selected_DistrictID !== '-1') {

                    Cities = Districts.find(x => x[1] == selected_DistrictID)[2];

                    Cities.forEach(function (x) {

                        cb_City.add(new Option(x[0], x[1]));

                    });

                };



};

        };

    </script>

فایل پیوست بر همین پایه است.

نام تاپیک: ایجاد لیست های کشویی استان و شهرهای هر استان

ابزار های تاپیک

نمایش

ایجاد لیست های کشویی استان و شهرهای هر استان

نقل قول: ایجاد لیست های کشویی استان و شهرهای هر استان

نقل قول: ایجاد لیست های کشویی استان و شهرهای هر استان

نقل قول: ایجاد لیست های کشویی استان و شهرهای هر استان

نقل قول: ایجاد لیست های کشویی استان و شهرهای هر استان

نقل قول: ایجاد لیست های کشویی استان و شهرهای هر استان

نقل قول: ایجاد لیست های کشویی استان و شهرهای هر استان

تاپیک های مشابه

سوال: ایجاد یک منو کشویی از لیست استان ها و شهر ها با کمک DNTPersianUtils.Core

آموزش: دانلود نمونه پروژه لیست کشویی با قابلیت جستجو در لیست

لیست کردن سایت های جستجویی گوگل در یک فایل تکست

حرفه ای: لیست کشویی با قابلیت جستجو

سوال: طریقه دسترسی و بایند کردن لیست کشویی داخل گیرید

قوانین ایجاد تاپیک در تالار