[help] Как сделать выпадающие списки Страна - Регион - Город

[ant1-pa]

Добрый день, может у кого-то есть скрипт с выпадающими спискмаии и с использованием jquery, ajax или json, чего угодно, лишь бы все работало + с базой данных.

Вот БД:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

есть еще вот такой код, если кто знает как прикрутить:

  this.placeSelect = {
        init: function () {
            this.country = $('country');
            this.region = $('region');
            this.city = $('city');
            
            this.country && (new Request({
    			method: 'post',
    			url: '/ajax/geo/',
    			data: { 'action': 'listCountries' },
    			onComplete: (function (_this) {
    				return function (responseHTML, responseXML) {
    				    if (responseXML && responseXML.getElementsByTagName('error').length) {
    				        tm.log(responseXML.getElementsByTagName('error')[0].firstChild.nodeValue);
    				        return false;
    				    };
    				    if (responseXML && (responseXML.getElementsByTagName('message')[0].firstChild.nodeValue == 'ok')) {
    				        var countries = responseXML.getElementsByTagName('country');
    				        for (var i=0, l=countries.length; i<l; i++) {
    				            var m = countries[i];
    				            (new Element('option', {'value': m.getAttribute('id'), 'html': m.firstChild.nodeValue })).inject(_this.country, 'bottom');
    				        };
    				    };
    				};
    			})(this)
    		}).send());
            
            this.country && this.country.addEvent('change', (function (e) {
        		new Request({
        			method: 'post',
        			url: '/ajax/geo/',
        			data: { 'action': 'listRegions', 'countryId': $(e.target).value },
        			onComplete: (function (_this) {
        				return function (responseHTML, responseXML) {
        				    if (responseXML && responseXML.getElementsByTagName('error').length) {
        				        tm.log(responseXML.getElementsByTagName('error')[0].firstChild.nodeValue);
        				        return false;
        				    };
        				    if (responseXML && (responseXML.getElementsByTagName('message')[0].firstChild.nodeValue == 'ok')) {
        				        _this.region.set('html', '');
        				        (new Element('option', {'value': -1, 'html': 'Выберите регион' })).inject(_this.region, 'bottom');
        				        _this.city.set('html', '');
        				        (new Element('option', {'value': -1, 'html': 'Выберите город' })).inject(_this.city, 'bottom');        				        
        				        
        				        _this.region.setStyle('visibility', 'visible');
        				        
        				        var regions = responseXML.getElementsByTagName('region');
        				        for (var i=0, l=regions.length; i<l; i++) {
        				            var m = regions[i];
        				            (new Element('option', {'value': m.getAttribute('id'), 'html': m.firstChild.nodeValue })).inject(_this.region, 'bottom');
        				        };
        				    };
        				};
        			})(this)
        		}).send();
            }).bindWithEvent(this));
            
            
            this.region && this.region.addEvent('change', (function (e) {
        		new Request({
        			method: 'post',
        			url: '/ajax/geo/',
        			data: { 'action': 'listCities', 'regionId': $(e.target).value },
        			onComplete: (function (_this) {
        				return function (responseHTML, responseXML) {
        				    if (responseXML && responseXML.getElementsByTagName('error').length) {
        				        tm.log(responseXML.getElementsByTagName('error')[0].firstChild.nodeValue);
        				        return false;
        				    };
        				    if (responseXML && (responseXML.getElementsByTagName('message')[0].firstChild.nodeValue == 'ok')) {
        				        _this.city.set('html', '');
        				        (new Element('option', {'value': -1, 'html': 'Выберите город' })).inject(_this.city, 'bottom');        				                				        
        				        _this.city.setStyle('visibility', 'visible');
        				        
        				        var cities = responseXML.getElementsByTagName('city');
        				        for (var i=0, l=cities.length; i<l; i++) {
        				            var m = cities[i];
        				            (new Element('option', {'value': m.getAttribute('id'), 'html': m.firstChild.nodeValue })).inject(_this.city, 'bottom');
        				        };
        				    };
        				};
        			})(this)
        		}).send();
            }).bindWithEvent(this));    
        }
    };

Спасибо всем кто поможет

 

[Sakhalinec]

нужно сделать проверка на событие в первых двум списках

не знаю поможет тебе или нет . но вот подобное реализованное с использованием аякса.
только тут 2 списка.

<tr>
<td width="50">
<script language="JavaScript" src="/scripts/board.js" type="text/javascript"></script>
<p>страна</p>
<select name='firms' id='firms' onChange='doChange(this, "страна")' >
<option value='0'>страна</option>
<option>
здесь делаешь вывод из базы</option>
</select> </td>
<td width="50"><p>город</p>
<select name='models' id='models'>
<option value='0' selected>город</option>
</select></td>
</tr>


а функция doChange прописана в файле

 

[ant1-pa]

это ты наверно с рипа ярска взял, и немного изменил?
этот вариант может и подходит, но к нему не смогу свою БД подкрутить.