PHP to HTML - Dinamik ComboBox / Açılır Menü (İl-İlçe-Semt) Yardım..

Arkadaşlar merhaba. HTML Site için yaptığım bir bölümde takıldım. Yardımcı olabilir misiniz?

Bu şekilde PHP'de yapılmış olan bir ComboBox (Select-Option) menüsünü HTML'de JS veya farklı bir şekilde yapmak istiyorum.

Çok basit bir sistem. Sadece <Select> <Option> yani ComboBox yapısını kullanarak 5 - 6 tane seçenek çıkmasını istiyorum. Son seçimden sonra devam butonuna tıklanıldığında baştan sona kadar seçilmiş ve sonuncu comboBox'takine göre ilgili bir sayfaya gitmesi gerekiyor.

Yani basit anlamda anlatmam gerekirse: Bir yere kayıt olurken karşımıza çıkan İl Seçimi Açılır Menüden Seçince İlçe Seçimi o bölümden de seçince Semt Seçimi gibi alt alta seçilen değere göre diğerini açma.

Örn:

Bu şekilde 2 tane HTML-JS kodum mevcut. Fakat 2. menüden sonra JS bilgim pek olmadığı için devam edemedim. Bu menüden 5 - 10 tane olacak bir önceki menüde seçilene göre diğer combobox taki değerler çıkacak. Olay bu kadar. PHP'de birden fazla var fakat ben HTML kullandığım için HTML gerekmekte.

Yardım edebilecek arkadaş için aşağıda elimde olan 3 çeşit farklı kodu da veriyorum.

Buraya kadar eklediğim 3 farklı kodlar.. İster bunlardan birinden devam edilebilir. İstenirse farklı bir kod olabilir.

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>

<script>
function byId(e) {return document.getElementById(e);}

function stateComboChange()
{
var combo1 = byId('stateCombo');
var combo2 = byId('cityCombo');
// alert(combo1.value);

emptyCombo(combo2);
switch(combo1.value)
{
case '-1': addOption(combo2, -1, '- Şehir Seçiniz -');
break;
case '0': addOption(combo2, 0, 'İstanbul');
addOption(combo2, 1, 'Edirne');
addOption(combo2, 2, 'Tekirdağ');
addOption(combo2, 3, 'Lüleburgaz');
break;
case '1': addOption(combo2, 0, 'Trabzon');
addOption(combo2, 1, 'Rize');
addOption(combo2, 2, 'Samsun');
break;
case '2': addOption(combo2, 0, 'İzmir');
addOption(combo2, 1, 'Aydın');
break;
case '3': addOption(combo2, 0, 'Vd');
addOption(combo2, 1, 'CC');
break;
}
cityComboChange();
}

function cityComboChange()
{
var combo2, tgt;
combo2 = byId('cityCombo');
tgt = byId('tgt');

tgt.innerHTML = combo2.options[combo2.options.selectedIndex].title;
}

function emptyCombo(e)
{
e.innerHTML = '';
}

function addOption(combo, val, txt)
{
var option = document.createElement('option');
option.value = val;
option.title = txt;
option.appendChild(document.createTextNode(txt));
combo.appendChild(option);
}

</script>
</head>

<body>

<select id='stateCombo' onchange='stateComboChange();'>
<option value='-1' title='-select one-'>-Bölge Seçiniz..-</option>
<option value='0' title='Vic'>Marmara Bölgesi</option>
<option value='1' title='Nsw'>Karadeniz Bölgesi</option>
<option value='2' title='Tas'>Ege Bölgesi</option>
<option value='3' title='Tas'>EEEVi</option>
</select>

<select id='cityCombo' onchange='cityComboChange();'>
<option value='-1' title='-select state first-'>-Önce Bölge Seçiniz-</option>
</select>

<div id='tgt'></div>

</body>
</html>
[/CODE]

-----------------------------------------------

[CODE]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>Dynamic Select Statements</title>
<script type="text/javascript">

var countryLists = new Array(4)
countryLists["empty"] = ["Bölge Seçin"];
countryLists["Marmara Bölgesi"] = ["İstanbul", "Edirne", "Tekirdağ"];
countryLists["Ege Bölgesi"] = ["Çanakkale", "İzmir", "Aydın"];
countryLists["Karadeniz Bölgesi"] = ["Trabzon", "Ordu", "Rize","Sinop"];

function countryChange(selectObj) {
var idx = selectObj.selectedIndex;
var which = selectObj.options[idx].value;
cList = countryLists[which];
var cSelect = document.getElementById("country");
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList;
newOption.text=cList;
try {
cSelect.add(newOption);
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
</head>

<body>

<h1></h1>
<label for="continent">Seç</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Bölge Seçin</option>
<option value="Marmara Bölgesi">Marmara Bölgesi</option>
<option value="Ege Bölgesi">Ege Bölgesi</option>
<option value="Karadeniz Bölgesi" >Karadeniz Bölgesi</option>
</select>
<br/>
<label for="country">Seçin</label>
<select id="country">
<option value="0">Şehir Seçin</option>
</select>

</body>
</html>[/CODE]

--------------------------------------------------

[CODE]<htmL>
<title>
</title>

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

function configureDropDownLists(county,city) {
var Davidson = new Array('', 'Antioch', 'Nashville');
var Rutherford = new Array('', 'Smyrna', 'LaVergne');

switch (county.value) {
case 'Davidson':
document.getElementById(city).options.length = 0;
for (i = 0; i < Davidson.length; i++) {
createOption(document.getElementById(city), Davidson, Davidson);
}
break;
case 'Rutherford':
document.getElementById(city).options.length = 0;
for (i = 0; i < Rutherford.length; i++) {
createOption(document.getElementById(city), Rutherford, Rutherford);
}
break;
}

}

function createOption(county, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
county.options.add(opt);
}
</script>
<tr>
<td>County Name: </td>
<td><select id="county" onchange="configureDropDownLists(this,'city');">
<option value=""></option>
<option value="Davidson">Davidson</option>
<option value="Rutherford">Rutherford</option>
</select></td>
</tr><br>
<tr>
<td>City: </td>
<td><select id="city">
</select></td>
</tr>

</body>
</html>[/CODE]

< Bu mesaj bu kişi tarafından değiştirildi Guest-074E5CC16 -- 11 Mayıs 2015; 11:21:20 >

PHP to HTML - Dinamik ComboBox / Açılır Menü (İl-İlçe-Semt) Yardım..

Benzer içerikler