Birbirine Bağlı Listboxlar

[btermeli]

Selamlar,

Yapmak istediğim bir listbox'a  şehir isimlerini veritabanından almak, seçilen şehir ismine göre de bir combobox'a şehrin ilçelerini getirmek.

Nasıl yapılacağına dair fikir verirseniz sevinirim. Şöyle bir java kodu buldum ama java bilgim yok o nedenle nasıl veritabanına bağlarım bilmiyorum.

Kod Seç Genişlet

* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Vladimir Geshanov |  */
var arrayData = new Array();
  arrayData[0] = 'SALES|[SAL] User 01|'
  arrayData[1] = 'SALES|[SAL] User 02|'
  arrayData[2] = 'SALES|[SAL] User 03|'
  arrayData[3] = 'MARKETING|[MAR] User 01|'
  arrayData[4] = 'MARKETING|[MAR] User 02|'
  arrayData[5] = 'MARKETING|[MAR] User 03|'
  arrayData[6] = 'TECHNOLOGY|[TEC] User 01|'
  arrayData[7] = 'TECHNOLOGY|[TEC] User 02|'
  arrayData[8] = 'TECHNOLOGY|[TEC] User 03|'

function populateData( name ) {
select = window.document.form.SubCategory;
string = "";
// 0 - will display the new options only
// 1 - will display the first existing option plus the new options
count = 0;

// Clear the old list (above element 0)
select.options.length = count;

// Place all matching categories into Options.
for( i = 0; i < arrayData.length; i++ ) {
string = arrayData[i].split( "|" );
if( string[0] == name ) {
select.options[count++] = new Option( string[1] );
}
}

// Set which option from subcategory is to be selected
// select.options.selectedIndex = 2;
// Give subcategory focus and select it
// select.focus();
}


[sem]

Merhabalar..

Verilen kodlar Java değil de JavaScript kodları. Genel de karıştırılıyor birbirne fakat isim dışında alakaları yoktur.

JS (JavaScript) tarafında ilgili form elemanınındeğerini elde elmeniz için getlElementById() fonksiyonunu kullanmanız gerekiyor. Daha sonra JS içerisinden veri tabanına sorgu göndermek için AJAX kullanabilirsiniz. XMLHttpRequest nesnesi ile sorguları gönderip cevapları alabilirsiniz. Aldığınız cevapları yine JavaScript ile html nesnesine yerleştirebilirsiniz...

JS ile html nesnesine erişmek için şu yolları izlemesiniz;

http://www.tizag.com/javascriptT/javascript-getelementbyid.php
http://www.delphifaq.com/faq/javascript/f1038.shtml


Sunucu tarafından bilgi almak için şu sınıfı kullanabilrsiniz;

http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php

[alquirel]

Ben de bu iş için en kısa yoldan bahsedeyim biraz.

JQuery kullanarak birkaç satır kod ile bu işlevi yerine getirebilirsin.
(JQuery, JavaScript kütüphanesidir ve çok çok satırlık JS fonksiyonlarını tek satırda halletmenize yarar)

Önce HTML kısmını yazayım :

Kod Seç Genişlet


<select id='il'>
    <option value=0>İl Seçiniz</option>
    <option value='istanbul'>İstanbul</option>
    <option value='ankara'>Ankara</option>
</select>

<select id='ilce'>
</select>


Şimdi JQuery kısmı

Kod Seç Genişlet


$("#il").change(function(){
    il=$(this).val();
    $.get('ilcegetir.php?il='+il,function(data){
         $("#ilce").html(data);
    });
});


Şimdi de PHP kısmı (ilcegetir.php)

Kod Seç Genişlet


<?php
$ilceler=array("istanbul"=>array("Fatih","Beyoğlu","Üsküdar"),"ankara"=>array("Gölbaşı","Çankaya","Keçiören"));
$il=$_GET['il'];
if($il!=0){
   $ilceliste='';
   foreach($ilceler[$il] as $ilce){
      $ilceliste=$ilceliste."<option>".$ilce."</option>";
   }
   echo $ilceliste;
}
?>


Bence ilcegetir.php dosyasının içinde tüm illeri ve ilçeleri hazır bir array şeklinde bekletmek daha mantıklı. Sonuçta çoook nadiren değişebilecek bir bilgi bu. Bunun için veritabanıyla uğraşmaya gerek yok bence.

Örnek kodlarda genel olarak ne yapmaya çalıştığım anlaşılır olmuştur umarım. Yine de kapalı kalan bir yer olursa geri dönüş olmasını çok isterim.

[canosayan]

alquel'in örnekleri oldukça güzel.

ama bu işten para kazanan biri olarak bir kaç laf salatası yapayım.
ajax büyük nimet evet ama ajax üzerinde html aktarmak pek verimli bir çalışma değil.

öncelikle bence yine bir veritabanı kullanın. bu bu sistemi size güncellemede kolaylık sağlar. php dosyamız şöyle olsun.

Kod Seç Genişlet


<?php
$sorgu=mysql_query('SELECT ilceId,ilceAd FROM tablo WHERE ilId="'.$_GET['il'].'"');
$ilce=array();
while($tek=mysql_fetch_assoc($sorgu))
{
     $ilce[]=array("id"=>$tek["ilceId"],"ad"=>$tek["ilceAd"]);
}
echo json_encode($ilce)
?>

html

Kod Seç Genişlet


<select id='il'>
    <option value=0>İl Seçiniz</option>
    <option value='34'>İstanbul</option>
    <option value='6'>Ankara</option>
</select>

<select id='ilce'>
</select>



ve javascript

Kod Seç Genişlet


$("#il").change(function(){
    var ilId=$(this).val();
    $.ajax({
        url:"ilceGetir.php",
        data:{il:ilId},
        dataType:"json",
        success:function(data){
              for(i in data)
              {
                     $("#ilce").append('<option value="'+data[i].id+'">'+data[i].ad+'</option>');
              }
       }
    });
});



Doğrudur bu biraz daha uzun gözüküyor. ama json aktarmanın belli avantajları var. öncelikle html aktardığınızda her seferinde takip eden '<option value=' gibi kısımları da aktaracaksınız. bu her seferinde daha fazla veriyi aktarmanızı gerektirecek.
Ayrıca option içerisine alarak aktardığınız verileri sadece selectbox içerisinde kullanabileceksiniz. düşünün kü bu sisteme bir de selectbox değil radiobox ile ilçe seçimi koyacaksınız. bu durumda option dolgulu veriler işinize yaramadığı için bir ilcegetir2.php dosyasına ihtiyacınız olacak. eğer birde checkbox yaparsanız yandık.

oysa json ile çalıştığınızda bu kodu sisteminizdeki her objeye yerleştirmeniz mümkün. çünkü gerekli html yapısı tarayıcı tarafından yazılacak. ayrıca bu kod yapısını sizin sunucunuz değil kullanıcı tarayıcısı oluşturacak.

[alquirel]

Açıkçası foruma yazacağım cevapları her zaman önce kendim deneyip sonra yazıyorum.
Denerken de JSON veri yapısıyla denemiştim aslında

Ama JS kanadını daha kısa tutabilmek için (ya da biraz tembellikten, biraz da ilerisini boşverip sorulanı yanıtlamak gayesinden diyelim) veri işleme kısmını PHP içerisine yazdım sonradan

Bu arada, selectbox içerisine yeni verileri yazmadan önce bi içini boşaltmak gerekir, yoksa append metoduyla hep bir önceki ilin ilçelerine eklenir durur.

[canosayan]

yok soru yanıtında hata yok.
append ise benim üşengeçliğim. genelde bir üst taşıyıcı oluşturup onun içine yeni baştan selectbox yerleştiririm ben.

[alquirel]

yok soru yanıtında hata yok.
append ise benim üşengeçliğim. genelde bir üst taşıyıcı oluşturup onun içine yeni baştan selectbox yerleştiririm ben.

Yani bu haliyle kullanıcı önce İstanbul'u sonra vazgeçip Ankara'yı seçse, bu kod, aldığı Ankara ilçelerini önceden yerleştirdiği İstanbul ilçelerinin peşine eklememiş mi olacak?

[canosayan]

yok soru yanıtında hata yok.
append ise benim üşengeçliğim. genelde bir üst taşıyıcı oluşturup onun içine yeni baştan selectbox yerleştiririm ben.

Yani bu haliyle kullanıcı önce İstanbul'u sonra vazgeçip Ankara'yı seçse, bu kod, aldığı Ankara ilçelerini önceden yerleştirdiği İstanbul ilçelerinin peşine eklememiş mi olacak?

evet bu yapı ne yazık ki onu yapıyor. for döngüsü önüne $("#ilce").html("") demek lazım.

[alquirel]

evet bu yapı ne yazık ki onu yapıyor. for döngüsü önüne $("#ilce").html("") demek lazım.

Evet ben de bundan bahsediyordum