canokay/Turkey_Cities_on_Ajax.html

## script.js
var turkeyCities=new Array("-----","Adana","Adıyaman","Afyonkarahisar","Ağrı","Amasya","Ankara","Antalya","Artvin","Aydın","Balıkesir","Bilecik","Bingöl","Bitlis","Bolu","Burdur","Bursa","Çanakkale","Çankırı","Çorum","Denizli","Diyarbakır","Edirne","Elazığ","Erzincan","Erzurum","Eskişehir","Gaziantep","Giresun","Gümüşhane","Hakkâri","Hatay","Isparta","Mersin","İstanbul","İzmir","Kars","Kastamonu","Kayseri","Kırklareli","Kırşehir","Kocaeli","Konya","Kütahya","Malatya","Manisa","Kahramanmaraş","Mardin","Muğla","Muş","Nevşehir","Niğde","Ordu","Rize","Sakarya","Samsun","Siirt","Sinop","Sivas","Tekirdağ","Tokat","Trabzon","Tunceli","Şanlıurfa","Uşak","Van","Yozgat","Zonguldak","Aksaray","Bayburt","Karaman","Kırıkkale","Batman","Şırnak","Bartın","Ardahan","Iğdır","Yalova","Karabük","Kilis","Osmaniye","Düzce");

for(i=1;i<=turkeyCities["length"]-1;i++){
    $("#cities").append("<option value=" + [i]+ ">"+turkeyCities[i]+"</option>");
};

//Selected City
function show_selected() {
    var selector = document.getElementById('cities');
    var selectedValue = selector[selector.selectedIndex].value;

    document.getElementById('selectedCity').innerHTML ="Selected City: "+turkeyCities[selectedValue];
}
document.getElementById('btn').addEventListener('click', show_selected);

## Turkey_Cities_on_Ajax.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

</head>
<body>
  <div class="form-group col-4 ml-auto mr-auto">
    <label for="exampleFormControlSelect2">City</label>
    <select class="form-control" id="cities"></select>
    <button id="btn" class="btn btn-success">Send</button>
    <div class="row"><label id="selectedCity"></label></div>
</div>
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>
</html>
	var turkeyCities=new Array("-----","Adana","Adıyaman","Afyonkarahisar","Ağrı","Amasya","Ankara","Antalya","Artvin","Aydın","Balıkesir","Bilecik","Bingöl","Bitlis","Bolu","Burdur","Bursa","Çanakkale","Çankırı","Çorum","Denizli","Diyarbakır","Edirne","Elazığ","Erzincan","Erzurum","Eskişehir","Gaziantep","Giresun","Gümüşhane","Hakkâri","Hatay","Isparta","Mersin","İstanbul","İzmir","Kars","Kastamonu","Kayseri","Kırklareli","Kırşehir","Kocaeli","Konya","Kütahya","Malatya","Manisa","Kahramanmaraş","Mardin","Muğla","Muş","Nevşehir","Niğde","Ordu","Rize","Sakarya","Samsun","Siirt","Sinop","Sivas","Tekirdağ","Tokat","Trabzon","Tunceli","Şanlıurfa","Uşak","Van","Yozgat","Zonguldak","Aksaray","Bayburt","Karaman","Kırıkkale","Batman","Şırnak","Bartın","Ardahan","Iğdır","Yalova","Karabük","Kilis","Osmaniye","Düzce");

	for(i=1;i<=turkeyCities["length"]-1;i++){
	$("#cities").append("<option value=" + [i]+ ">"+turkeyCities[i]+"</option>");
	};

	//Selected City
	function show_selected() {
	var selector = document.getElementById('cities');
	var selectedValue = selector[selector.selectedIndex].value;

	document.getElementById('selectedCity').innerHTML ="Selected City: "+turkeyCities[selectedValue];
	}
	document.getElementById('btn').addEventListener('click', show_selected);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

	</head>
	<body>
	<div class="form-group col-4 ml-auto mr-auto">
	<label for="exampleFormControlSelect2">City</label>
	<select class="form-control" id="cities"></select>
	<button id="btn" class="btn btn-success">Send</button>
	<div class="row"><label id="selectedCity"></label></div>
	</div>
	<script src="script.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

	</body>
	</html>