Добрый день, кто-нибудь может подсказать, как сделать динамический селект такого вида: есть страны, регионы и города, изначально они заполняются из бд (это реализовано). при выборе страны меняются списки рагионов и городов, при последующем выборе региона меняется список городов. В аяксе не сильна к сожалению. Также рассматривается цена вопроса, потому что нужно очень срочно. Пример вот такой (страна-регион-город) http://www.interhome.ru/holiday-rentals ... earchError Очень жду ответов. Спасибо.
Ребят три дня бьюсь прошерстил весь инет перепробывал и jQuery и JSHttpRequest толи я дурак толи лыжи не едут и чуствую без помощи специалистов не поедут прошу Вас о помощи, прошу не глумится и отсылать на фрилэнс задача такая три таблицы в БД кафеды(kafedra) , дисциплины (distip), и таблица (tema) нужны три выпадающих списка динамических третий зависит от второго второй от первого, выбираем кафедру во втором все дисциплины по этой кафедре, выбираем дисциплину в третьем все темы по этой дисциплине. [sql]CREATE TABLE IF NOT EXISTS `kafedra` ( `id_kafedra` int( 10 ) unsigned NOT NULL AUTO_INCREMENT , `name` text NOT NULL , `fullname` tinytext NOT NULL , `hide` enum( 'show', 'hide' ) NOT NULL DEFAULT 'show', PRIMARY KEY ( `id_kafedra` ) ) ENGINE = INNODB DEFAULT CHARSET = cp1251 AUTO_INCREMENT =0; CREATE TABLE IF NOT EXISTS `distip` ( `id_distip` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` text NOT NULL, `fullname` tinytext NOT NULL, `hide` enum('show','hide') NOT NULL DEFAULT 'show', `id_kafedra` int(10) unsigned NOT NULL DEFAULT '0', PRIMARY KEY (`id_distip`), KEY `id_kafedra` (`id_kafedra`) ) ENGINE=INNODB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=0 ; CREATE TABLE IF NOT EXISTS `tema` ( `id_tema` int(10) unsigned NOT NULL AUTO_INCREMENT, `name` text NOT NULL, `fullname` tinytext NOT NULL, `pos` text NOT NULL, `hide` enum('show','hide') NOT NULL DEFAULT 'show', `id_distip` int(10) unsigned NOT NULL DEFAULT '0', `id_kafedra` int(10) unsigned NOT NULL DEFAULT '0', PRIMARY KEY (`id_tema`), KEY `id_distip` (`id_distip`), KEY `id_kafedra` (`id_kafedra`) ) ENGINE=INNODB DEFAULT CHARSET=cp1251 AUTO_INCREMENT=0 [/sql] index.php PHP: <head> <script type="text/javascript" src="script.js"></script> </head> <body> <select name="kafedra" id="kafedra"> <option value="0" selected>Выберите кафедру...</option> <?php require_once("../config.php"); $sql=mysql_query("SELECT * FROM kafedra"); $n=0; $a=0; while ($ctg = mysql_fetch_array($sql)) { $id[n]=$ctg['id_kafedra']; $i[n]=$ctg['name']; $n=$n+1; echo "<option value=".$id[n].">";echo $i[n]; echo "</option>"; } ?> </select> <select name="distip" id="distip"> <option value="0" selected>Выберите дисциплину...</option> <?php $sql=mysql_query("SELECT * FROM kafedra"); $n=0; $a=0; while ($ctg = mysql_fetch_array($sql)) { $id[n]=$ctg['id_kafedra']; $i[n]=$ctg['name']; $n=$n+1; $sqla=mysql_query("SELECT id_distip,name FROM distip WHERE id_kafedra=".$ctg['id_kafedra'].""); while ($ctga = mysql_fetch_array($sqla)) { $od[a]=$ctga['id_distip']; $o[a]=$ctga['name']; $a=$a+1; echo "<option class=".$i[n]." value=".$od[a].">";echo $o[a]; echo "</option>"; } } ?> </select> </body> script.js [js]function dynamicSelect(id1, id2) { // Сперва необходимо проверить поддержку W3C DOM в браузере if (document.getElementById && document.getElementsByTagName) { // Определение переменных, ссылающихся на списки var sel1 = document.getElementById(id1); var sel2 = document.getElementById(id2); // Клонирование динамического списка var clone = sel2.cloneNode(true); // Определение переменных для клонированных элементов списка var clonedOptions = clone.getElementsByTagName("option"); // Вызов функции собирающей вызываемый список refreshDynamicSelectOptions(sel1, sel2, clonedOptions); // При изменении выбранного элемента в первом списке: // вызов функции пересобирающей вызываемый список sel1.onchange = function() { refreshDynamicSelectOptions(sel1, sel2, clonedOptions); } } } // Функция для сборки динамического списка function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) { // Удаление всех элементов динамического списка while (sel2.options.length) { sel2.remove(0); } var pattern1 = /( |^)(select)( |$)/; var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)"); // Перебор клонированных элементов списка for (var i = 0; i < clonedOptions.length; i++) { // Если название класса клонированного option эквивалентно "select" // либо эквивалентно значению option первого списка if (clonedOptions.className.match(pattern1) || clonedOptions.className.match(pattern2)) { // его нужно клонировать в динамически создаваемый список sel2.appendChild(clonedOptions.cloneNode(true)); } } } window.onload = function() { dynamicSelect("kafedra", "distip"); }[/js] P.S. на втором списки застрял помогите нет не чего
как в этом случае поставить не одно конкретное значение myChoice == 3,а от от 0 до 4(любое) $('#form_match1').change(function(){ var myChoice2 = $('#form_match1 :selected').val(); if(myChoice2 == 3) { $('#form_match3').attr('disabled','disabled'); } else{ $('#form_match3').attr('disabled',false); }
Такую мелочь, как показано в примере, аджаксами таскать - как то стыдно даже Ajax оправдан, если большие списки надо загружать. К примеру списки городов по выбранной стране. Сразу то всю базу клиенту не очень хорошо вываливать. Но если посмотреть внимательно как делают на качественных сайтах, то грузят опять же не список, а только хелпер (10-15 строк) соответствующих началу ввода пользователя. Связанные селекты, когда объем данных не велик, лучше организовать полностью на стороне клиента. Для универсально случая подойдет вот этот скрипт. Он работает с любой вложенностью списков. Там же есть отсылка на более простой пример с двумя связанными списками.
некропостинг. а вот подход нравится — если общее количество записей не очень большое, почему бы не выдавать их сразу на клиента! можно еще и через CDN раздавать в пожатом виде, вообще красота будет.
имхо незаменимая весчь для работы с динамическими селектами - крохотный jquery.chained.min.js, кто незнаком, очень рекомендую попробовать. Ссылку на гитхаб не даю, сами найдете, а то мало ли кто чего подумает:
реально крутая штука: https://github.com/tuupola/jquery_chained и все на редкость элегантно и просто:
не совсем понимаю зачем такое надо? там 15 строк на JQ сделать и вот связанные селекты... или тут что то другое?
@Elkaz а если 3 селекта, и 3-й зависит от второго? Т.е. выбираем значение 1 селекта, подгружается значение 2-го, и в зависимости от значения selected 2-го, подгружаются данные в 3-й селект. Как реализовать?