یک نکته مهم این هست که بطور متعارف 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>
فایل پیوست بر همین پایه است.
پاسخ با نقل قول