CpaHb 0 Опубликовано: 19 сентября 2010 Рассказать Опубликовано: 19 сентября 2010 (изменено) Добрый день уважаемые. На данном этапе разработки своего строительного проекта столкнулся с проблемой, пытаюсь сделать динамические selet с выбором Страны, Региона и Города при регистрации. Это все пытаюсь сделать при помощи этих вот исходников через Jquery: Файл index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.3.1.js" type="text/javascript"></script> <style type="text/css"> body { position: relative; margin: 0; padding: 0; font-family: Georgia, Times, "Times New Roman", serif; font-size: 9pt; color: #000; } .border { float: left; margin: 10px 0 0 5px; } label { padding-left: 5px; } select { width: 130px; font-family: Georgia, Times, "Times New Roman", serif; font-size: 9pt; color: #000; } </style> <script type="text/javascript"> (function($){ // очищаем select $.fn.clearSelect = function() { return this.each(function(){ if(this.tagName=='SELECT') { this.options.length = 0; $(this).attr('disabled','disabled'); } }); } // заполняем select $.fn.fillSelect = function(dataArray) { return this.clearSelect().each(function(){ if(this.tagName=='SELECT') { var currentSelect = this; $.each(dataArray,function(index,data){ var option = new Option(data.text,data.value); if($.support.cssFloat) { currentSelect.add(option,null); } else { currentSelect.add(option); } }); } }); } })(jQuery); </script> <script type="text/javascript"> $(document).ready(function(){ // выбор автомобиля function adjustAuto(){ var countryValue = $('#country').val(); var tmpSelect = $('#auto'); if(countryValue.length == 0) { tmpSelect.attr('disabled','disabled'); tmpSelect.clearSelect(); adjustModel(); } else { $.getJSON('cascadeSelectAuto.php',{country:countryValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); adjustModel(); }); } }; // выбор модели function adjustModel(){ var countryValue = $('#country').val(); var autoValue = $('#auto').val(); var tmpSelect = $('#model'); if(countryValue.length == 0||autoValue.length == 0) { tmpSelect.attr('disabled','disabled'); tmpSelect.clearSelect(); } else { $.getJSON('cascadeSelectModel.php',{country:countryValue,auto:autoValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); }); } }; $('#country').change(function(){ adjustAuto(); }).change(); $('#auto').change(adjustModel); $('#model').change(function(){ if($(this).val().length != 0) { alert('Выбор сделан!'); } }); }); </script> </head> <body> <div class="border"> <label>Страна</label><br /> <select id="country"> <option value="">Выбрать страну</option> <option value="1">Германия</option> <option value="2">Ю.Корея</option> <option value="3">Япония</option> </select> </div> <div class="border"> <label>Автомобиль</label><br /> <select id="auto" disabled="disabled"></select> </div> <div class="border"> <label>Модель</label><br /> <select id="model" disabled="disabled"></select> </div> </body> </html> Файл cascadeSelectAuto.php <?php header('Content-Type: text/html; charset=utf-8'); if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') { switch($_GET['country']) { case '1': print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Audi"},{value:"2",text:"BMW"},{value:"3",text:"Opel"}]'; break; case '2': print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Daewoo"},{value:"2",text:"Hyundai"},{value:"3",text:"KIA"}]'; break; case '3': print '[{value:"",text:"Выбрать автомобиль"},{value:"1",text:"Honda"},{value:"2",text:"Mazda"},{value:"3",text:"Toyota"}]'; break; default: print '[{value:"",text:"Выбрать автомобиль"}]'; break; } } ?> Файл: cascadeSelectModel.php <?php header('Content-Type: text/html; charset=utf-8'); if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') { if($_GET['country']==1) { switch($_GET['auto']) { case '1': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"A4"},{value:"2",text:"Q7"},{value:"3",text:"TT"}]'; break; case '2': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"6ER"},{value:"2",text:"M"},{value:"3",text:"X6"}]'; break; case '3': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Astra"},{value:"2",text:"Corsa"},{value:"3",text:"Vectra"}]'; break; default: print '[{value:"",text:"Выбрать модель"}]'; break; } } elseif($_GET['country']==2) { switch($_GET['auto']) { case '1': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Matiz"},{value:"2",text:"Nexia"}]'; break; case '2': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Accent"},{value:"2",text:"Elantra"},{value:"3",text:"Sonata"}]'; break; case '3': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Carnival"},{value:"2",text:"Picanto"},{value:"3",text:"Spectra"}]'; break; default: print '[{value:"",text:"Выбрать модель"}]'; break; } } elseif($_GET['country']==3) { switch($_GET['auto']) { case '1': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Accord"},{value:"2",text:"Civic"},{value:"3",text:"CR-V"}]'; break; case '2': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Mazda 3"},{value:"2",text:"Mazda 5"},{value:"3",text:"Mazda 6"}]'; break; case '3': print '[{value:"",text:"Выбрать модель"},{value:"1",text:"Corolla"},{value:"2",text:"LandCruiser"},{value:"3",text:"RAV4"}]'; break; default: print '[{value:"",text:"Выбрать модель"}]'; break; } } else { print '[{value:"",text:"Выбрать модель"}]'; } } ?> Если вдруг кто подскажет, как реализовать чтобы это все работало при регистрации, то отблагодарю щедро. Занесение в БД и т.п. я сделаю сам, главное чтобы динамика заработала.Версия скрипта 9.0 Изменено 19 сентября 2010 пользователем CpaHb Цитата Ссылка на сообщение Поделиться на других сайтах
CpaHb 0 Опубликовано: 19 сентября 2010 Рассказать Опубликовано: 19 сентября 2010 (изменено) Автор Проект CpaHu.NET Кто поможет сделать при регистрации динамический выбор страны -> региона -> города - отблагодарю хорошо. Главное чтобы все это было кроссобраузерно и работало без перезагрузки страницы. Изменено 19 сентября 2010 пользователем CpaHb Цитата Ссылка на сообщение Поделиться на других сайтах
zgr 72 Опубликовано: 19 сентября 2010 Рассказать Опубликовано: 19 сентября 2010 Привет, написал в личку. Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.