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

[ROSTAM2]

سلام

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

155713

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

155715


<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]

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

155716

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

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

با تشکر.

[ROSTAM2]

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

سوال فنی در مورد نرم افزار حسابداری!! (پست شماره 19) (https://barnamenevis.org/showthread.php?580285-%D8%B3%D9%88%D8%A7%D9%84-%D9%81%D9%86%DB%8C-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1-%D8%AD%D8%B3%D8%A7%D8%A8%D8%AF%D8%A7%D8%B1%DB%8C!!&p=2468574&viewfull=1#post2468574)

[mazoolagh]

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

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

سلام و روز خوش

شما میتونین دیتا رو به صورت 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

155725
که این شکل دیتا در جاوااسکریپت قابل استفاده نیست،
پس:
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

155726

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

یا اگر بخواهیم pretty میکنیم (تاثیری در کار نداره و اینجا برای خوانایی انجام شده):
155729

[mazoolagh]

برای نمایش روش کار یک فایل 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]

اگر فقط اطلاعات استان/شهر نیاز باشه:
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

155732

<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]

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

نکته دیگه این هست که برای کاهش حجم دیتا فایل data.js میتونیم اون رو به صورت یک ارایه معمولی دربیاریم:
155733

در این صورت کد جاوااسکریپ رو باید به شکل زیر تغییر بدیم:
<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>


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