یکی از آیتم هایی که در طراحی سایت ها شاید موردنیاز قرار بگیرد، تهیه لیستی از کشورها در برخی فرم ها مانند فرم عضویت یا پروفایل کاربری و … است. در حالت کاملا ساده و سنتی می توانیم توسط تگ Select در HTML این لیست کشورها را اضافه کنیم و داخل یک صفحه قرار دهیم اما شاید اینکار زمانبر باشد و مدیریت آنها نیز کمی دشوار به نظر برسد. ولی همینکار را می توانیم در جاوا اسکریپت انجام دهیم و بطور خیلی ساده این امکان را داشته باشیم که یک لیست از اطلاعات را داخل تگ Select وارد کنیم بدون اینکه حتی نیاز به کدنویسی اضافه ای داشته باشیم. همین نمونه کد را می توانیم برای سایر لیست ها مانند لیست شهرها، لیست محصولات، لیست خدمات و … بکار ببریم. با بیتاک همراه باشید.
ابتدا باید لیستی از کشورها یا شهرها یا خدمات و محصولات و هر لیستی که مدنظر دارید را تهیه کنیم و آن را به صورت دسته بندی شده در کدی مانند زیر قرار دهیم. این کد یک کد جاوا اسکریپت است:
const countries = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina",
"Armenia",
"Aruba",
"Australia",
"Austria",
"Azerbaijan",
"Bahamas",
"Bahrain",
"Bangladesh",
"Barbados",
"Belarus",
"Belgium",
"Belize",
"Benin",
"Bermuda",
"Bhutan",
"Bolivia",
"Bosnia and Herzegowina",
"Botswana",
"Bouvet Island",
"Brazil",
"British Indian Ocean Territory",
"Brunei Darussalam",
"Bulgaria",
"Burkina Faso",
"Burundi",
"Cambodia",
"Cameroon",
"Canada",
"Cape Verde",
"Cayman Islands",
"Central African Republic",
"Chad",
"Chile",
"China",
"Christmas Island",
"Cocos (Keeling) Islands",
"Colombia",
"Comoros",
"Congo",
"Congo, the Democratic Republic of the",
"Cook Islands",
"Costa Rica",
"Cote d'Ivoire",
"Croatia (Hrvatska)",
"Cuba",
"Cyprus",
"Czech Republic",
"Denmark",
"Djibouti",
"Dominica",
"Dominican Republic",
"East Timor",
"Ecuador",
"Egypt",
"El Salvador",
"Equatorial Guinea",
"Eritrea",
"Estonia",
"Ethiopia",
"Falkland Islands (Malvinas)",
"Faroe Islands",
"Fiji",
"Finland",
"France",
"France Metropolitan",
"French Guiana",
"French Polynesia",
"French Southern Territories",
"Gabon",
"Gambia",
"Georgia",
"Germany",
"Ghana",
"Gibraltar",
"Greece",
"Greenland",
"Grenada",
"Guadeloupe",
"Guam",
"Guatemala",
"Guinea",
"Guinea-Bissau",
"Guyana",
"Haiti",
"Heard and Mc Donald Islands",
"Holy See (Vatican City State)",
"Honduras",
"Hong Kong",
"Hungary",
"Iceland",
"India",
"Indonesia",
"Iran (Islamic Republic of)",
"Iraq",
"Ireland",
"Italy",
"Jamaica",
"Japan",
"Jordan",
"Kazakhstan",
"Kenya",
"Kiribati",
"Korea, Democratic People's Republic of",
"Korea, Republic of",
"Kuwait",
"Kyrgyzstan",
"Lao, People's Democratic Republic",
"Latvia",
"Lebanon",
"Lesotho",
"Liberia",
"Libyan Arab Jamahiriya",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macau",
"Macedonia, The Former Yugoslav Republic of",
"Madagascar",
"Malawi",
"Malaysia",
"Maldives",
"Mali",
"Malta",
"Marshall Islands",
"Martinique",
"Mauritania",
"Mauritius",
"Mayotte",
"Mexico",
"Micronesia, Federated States of",
"Moldova, Republic of",
"Monaco",
"Mongolia",
"Montserrat",
"Morocco",
"Mozambique",
"Myanmar",
"Namibia",
"Nauru",
"Nepal",
"Netherlands",
"Netherlands Antilles",
"New Caledonia",
"New Zealand",
"Nicaragua",
"Niger",
"Nigeria",
"Niue",
"Norfolk Island",
"Northern Mariana Islands",
"Norway",
"Oman",
"Pakistan",
"Palau",
"Panama",
"Papua New Guinea",
"Paraguay",
"Peru",
"Philippines",
"Pitcairn",
"Poland",
"Portugal",
"Puerto Rico",
"Qatar",
"Reunion",
"Romania",
"Russian Federation",
"Rwanda",
"Saint Kitts and Nevis",
"Saint Lucia",
"Saint Vincent and the Grenadines",
"Samoa",
"San Marino",
"Sao Tome and Principe",
"Saudi Arabia",
"Senegal",
"Seychelles",
"Sierra Leone",
"Singapore",
"Slovakia (Slovak Republic)",
"Slovenia",
"Solomon Islands",
"Somalia",
"South Africa",
"South Georgia and the South Sandwich Islands",
"Spain",
"Sri Lanka",
"St. Helena",
"St. Pierre and Miquelon",
"Sudan",
"Suriname",
"Svalbard and Jan Mayen Islands",
"Swaziland",
"Sweden",
"Switzerland",
"Syrian Arab Republic",
"Taiwan, Province of China",
"Tajikistan",
"Tanzania, United Republic of",
"Thailand",
"Togo",
"Tokelau",
"Tonga",
"Trinidad and Tobago",
"Tunisia",
"Turkey",
"Turkmenistan",
"Turks and Caicos Islands",
"Tuvalu",
"Uganda",
"Ukraine",
"United Arab Emirates",
"United Kingdom",
"United States",
"United States Minor Outlying Islands",
"Uruguay",
"Uzbekistan",
"Vanuatu",
"Venezuela",
"Vietnam",
"Virgin Islands (British)",
"Virgin Islands (U.S.)",
"Wallis and Futuna Islands",
"Western Sahara",
"Yemen",
"Yugoslavia",
"Zambia",
"Zimbabwe",
];
همانطور که مشاهده می کنید، هر کشور در یک خط تعریف شده است. مرحله بعدی اضافه کردن کد زیر به ادامه کد بالا است:
countries.forEach((country) => document.querySelector("#keshvar").add(new Option(country, country)));
کد بالا وظیفه اعمال لیست کشورها و وارد کردن به تگ HTML را برعهده دارد که در کدبالا آی دی تگ موردنظر ما در document.querySelector("#keshvar") تعریف شده است. شما باید بجای #keshvarآی دی تگ کد Select در طرح خود را جایگزین کنید.
قدم بعدی، اضافه کردن کد Select به سورس قالب است. این کد را باید در مکانی از قالب یا سایت قرار دهید که قصد دارید این لیست نمایش داده شود و آی دی آن را دقیقا همان آی دی وارد شده در کد جاوا اسکریپت بالا تعریف کنید:
<select id="keshvar"></select>
در نهایت خروجی کد شما به این صورت خواهد بود:
به همین ترتیب شما می توانید لیست های دیگری با این نمونه کد ایجاد کنید.
