Bu iþi yapmak için çok kolay kullandýðým eskilerde yazdýðým bir
scripti gönderiyorum. Daðýtýmý serbest, Adýna SelectTree demiþim ;)

JS:

function SelectTree(group_name){
    var STEs = new Array();

    var getGroupName = function(element){return
element.getAttribute('SelectTreeGroup');}
    var getLevel = function(element){return element.getAttribute('Level');}
    var getURL = function(element){
        var url = element.getAttribute('URL')
        return url ? url : document.location.href ;
    }
    var getDefaultValue = function(element){return
element.getAttribute('DefaultValue');}
    var getLabel = function(element){return element.getAttribute('Label');}
    var getEmptyLabel = function(element){return
element.getAttribute('EmptyLabel');}

    var empty = function(element_id){
        STEs[element_id].length = 0;
        STEs[element_id].options[0] = new
Option(getEmptyLabel(STEs[element_id]), null);
    }

    var disable = function(element_id){
        for (i=element_id;i<STEs.length;i++) {
            empty(i);
            STEs[i].disabled = true;
        }
    }

    var getJsonObj = function(element_id){
        var url = getURL(STEs[element_id]) + '?SelectTree&';
        for(i=0;i<element_id;i++){
            var value = '';
            for (x=0;x<STEs[i].options.length;x++) {
                value += STEs[i].options[x].selected ?
','+STEs[i].options[x].value : '';
            }
            value = value.substring(1, value.length);
            url += i + '=' + value + '&';
        }

        /* JQuery */
        $.get(url, null, function(data){
            fillContinue(element_id, eval('(' + data + ')'));
        });

        /* Mootools */
        /*
        new Ajax(url, {onComplete: function(data){
        fillContinue(element_id, eval('(' + data + ')'));
        }}).request();
        */

        /* Prototype */
        /*
        new Ajax.Request('/some_url',
        {
        method:'get',
        onSuccess: function(transport){
        fillContinue(element_id, transport.responseText.evalJSON());
        }
        });
        */

    }

    var fill = function(element_id){
        empty(element_id);
        disable(element_id);
        getJsonObj(element_id);
    }

    var fillContinue = function(element_id, obj){
        var el = STEs[element_id];
        if (obj && obj.length && obj.length>0) {
            el.disabled = false;
            el.options.length = 0;
            var label = getLabel(el);

            if (label && label!=''){
                el.options[0] = new Option(label, null);
            }

            if (STEs[element_id+1]) {
                el.onchange = function(){
                    fill(element_id+1);
                }
            }

            var default_value = getDefaultValue(el);

            var selected;

            for (i=0;i<obj.length;i++){
                el.options[i+1] = new Option(obj[i].name, obj[i].value);

                if (default_value && default_value!='' &&
default_value == obj[i].value) {
                    selected = i+1;
                }
            }

            if (selected>0) {
                el.options[selected].selected = true;
                if (STEs[element_id+1]) {
                    fill(element_id+1);
                }
            }
        }
    }

    did = function(){
        var tmpSTEs = document.getElementsByTagName('select');
        for (i=0; i<tmpSTEs.length; i++){
            el = tmpSTEs[i];
            if(getGroupName(el) && getGroupName(el)==group_name){
                level = getLevel(el);

                if(!level){
                    alert('Level Belirtilmemiþ.');
                    return false;
                }

                /*
                if(!getURL(el)){
                alert('URL Belirtilmemiþ.');
                return false;
                }
                */
                STEs[level] = el;
            }
        }

        if (STEs.length == 0) {
            alert('Belirtilen Gurupda Elemen Bulunamadý');
            return false;
        }

        for (i=0;i<STEs.length;i++) {
            if (!STEs[i]) {
                alert('Eksik Ayar: ' + i + ' Level');
                return false;
            }
        }

        return fill(0);
    }

    did();
}

HTML:

.
..

<select name="city" id="city" SelectTreeGroup="group2" Level="0"
URL="/ajax/getplaces" Label="Seçiniz" EmptyLabel="Null"
style="width:250px;"></select>
<select name="district_id" id="district_id" SelectTreeGroup="group2"
Level="1" URL="/ajax/getplaces" Label="Seçiniz" EmptyLabel="Önce Ýl
Seçiniz" style="width:250px;">

..
.

PHP:
<?php
if (isset($_GET['1'])) {
    // Ýlçe ResulSet veya Level 2 istenilen kadar yazailrsiniz.
} elseif (isset($_GET['0'])) {
    $id = (int)$_GET['0'];
    // Þehir ResulSet veya Level 1
} else {
    // Ülke ResulSet veya Level 0
}
$rtrn = array();
foreach ($res as $row) {
    $rtrn[] = array('value'=>$row->id, 'name'=>$row->name);
}
echo json_encode($rtrn);

Kullaným:
onlaod veya sayfanýn sonunda

<script>SelectTree('group1');</script>

yazacaksýn. birden fazla kullandýysan (þehirler, sektörler vs) group1,
group2 veya sehirler, sektorler gibi guruplar vererrk kulalnabilirsin.
bunu kullanmak istersen ve sýkýntý yaþarsan genel olmadýðýný
düþündüðünde özel olarak yaz.

js dosyasýnýn üst tarafýnda Ajax eylemi için Mootols, JQuery ve
Prototype örneklerini yazdým. kullanacaðýný býrak diðerini kapat.
Kendin de benzerini ordan oluþturabilirsin. [Sýkýntýlar olabilr çünki
ondan sonra örneðin mootolsun yapýsý çok deðiþti :( ]

hadi kolay gelsin.

--
Elvin Þiriyev
http://siriyev.net
_______________________________________________
Linux-programlama mailing list
Linux-programlama_at_liste.linux.org.tr
http://liste.linux.org.tr/mailman/listinfo/linux-programlama