2 связанных SELECT + PHP.
Добрый день. Ситуация такова есть 2 <input type = "select">
1 - theme (Тема) 2 - template (Шаблон) Мне нужно вывести данные в select(ы) из php(SQL). Если user нечиго не выбрал, оставить так как есть. Если выбрал, то записать в базу и вернуть в select(ы) данные из GET. Вопрос на мой взгляд очень не простой в отношение выгрузки данных из GET во второй синхронный список. Нужны варианты кода как это реализовать. Если есть способ проще (например без select), готов рассмотреть его. PS "Я уверен что опытные javascript кодеры могут предложить, что то реально быстрое и качественное". За ранее спасибо сервису и людям которые делятся своим опытом. |
Вот начало кода на php
<?php $OPTION_SELECT1[0]='demo'; $OPTION_SELECT1[1]='demo2'; $OPTION_SELECT1[2]='demo3'; $DB_THEME = 'demo'; echo '<form method="GET">'; $SELECT1.='<p><select size="1" name="theme">'; for($i=0;$i<sizeOf($OPTION_SELECT1);$i++){ if ($_GET['theme'] == $OPTION_SELECT1[$i] or $DB_THEME == $OPTION_SELECT1[$i]) $SELECT1.='<option selected value="'.$OPTION_SELECT1[$i].'">'.$OPTION_SELECT1[$i].'</option>'; else $SELECT1.='<option value="'.$OPTION_SELECT1[$i].'">'.$OPTION_SELECT1[$i].'</option>'; } $SELECT1.='</select></p>'; echo $SELECT1; echo '<input type="submit" value="Отправить">'; echo '</form>'; ?> РЕЗУЛЬТАТ: Выводиться список [theme], если переменная их базы данных или переменная из запроса GET = одному из полей списка(SELECT), то сделать [option selected](Выделенной), иначе (не выделенной). Теперь мне нужно синхронизировать 2-ой список (SELECT name="template") с 1-ым списком (SELECT name="theme") и при GET запросе возвращать в оба списка соответствующие значения. |
Цитата:
и.. лучше поместить php код в теги а еще лучше заменить php код его выводом ( селекты ) локализуйте проблему! авось, кто-нибудь да возьмется . а так.. это вообще синхронно или нет? |
"а так.. это вообще синхронно или нет?" - Хотелось бы Асинхронно
|
вот примерчик
<style>iframe{display:none}</style>
Что вы используете?<sub> выберите что-нибудь, и форма отправится сама..асинхронно</sub>
<form name=sel>
<select name=selected>
<option value=chrome>Chrome</option>
<option value=Opera>Opera</option>
<option value=firefox>Firefox</option>
<option value=other>other</option>
</select>
</form>
Информация об отправке :
<b>NULL</b>
<iframe src="/" id="fr"></iframe>
<script>
var form = document.sel,
sel = form.selected,
log = document.getElementsByTagName('b')[0],
frame = document.getElementById("fr")
form.onchange = function(){
log.innerHTML = "Загрузка..."
frame.src = "/?selected="+sel.value;
}
frame.onload = function(){
log.innerHTML = "Загружено"
}
</script>
данные отправляются методом GET вот пример Код:
http://testbin.ru/?selected=Operaможно еще рассмотреть по-другому : копировать всю форму во фрейм, и оттуда уже делать субмит. |
Привожу свой исходник
Файл: Index.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Новая страница 1</title> <script type="text/javascript" src="syncList.js"></script> <script type="text/javascript"> function GET_THEM_AND_TEMPLATE(){ GET_LIST(); var DEFUALT_THEME = 'demo2'; var DEFUALT_TEMPLATE = 'contact'; var theme = document.editpage.theme; for(var i=0; i<theme.options.length; i++){ if (theme.options[i].value == DEFUALT_THEME) theme.options[i].selected=true; } var template = document.editpage.template; for(i=0; i<template.options.length; i++){ if (template.options[i].value == DEFUALT_TEMPLATE) template.options[i].selected=true; } } function GET_LIST(){ var syncList1 = new syncList; syncList1.dataList = { 'demo':{ 'index2':'index', 'contact2':'contact', }, 'demo2':{ 'index':'index', 'contact':'contact', }, }; syncList1.sync("List1","List2"); } </script> </head> <body onload="GET_THEM_AND_TEMPLATE()"> <form name="editpage" method="GET"> <select size="1" name="theme" id="List1" onchange="GET_LIST()"> <option value="demo">Тема: Demo</option> <option value="demo2">Тема: Demo2</option> </select> <select size="1" name="template" id="List2"> </select> </form> </body> </html> Файл: syncList.js /* wwww.tigir.com (дата последней модификации - 30.11.2007) Библиотека linkedselect.js из статьи "Javascript SELECT - динамические списки" - http://www.tigir.com/linked_select.htm syncList - "класс" связанных списков */ function syncList(){} //Определяем функцию конструктор //Определяем методы //Метод sync() - принимает список из значений атрибутов id элементов SELECT, образующих связанный список и запускает их синхронизацию syncList.prototype.sync = function() { //Перебираем аргументы (id элементов SELECT) и назначаем событиям onChange селектов, с соответствующими id, функцию-обработчик. //В качестве обработчика выступает второй метод объекта syncList - _sync (напрямую его вызывать не нужно) //Обработчик назначается всем элементам SELECT кроме последнего в списке аргументов, т.к. последний не влияет ни на какой другой элемент SELECT и с ним не нужно синхронизироваться. for (var i=0; i < arguments.length-1; i++) document.getElementById(arguments[i]).onchange = (function (o,id1,id2){return function(){o._sync(id1,id2);};})(this, arguments[i], arguments[i+1]); document.getElementById(arguments[0]).onchange();//запускаем обработчик onchange первого селекта, чтобы при загрузке страницы заполнить дочерние селекты значениями. } //служебный метод _sync - срабатывает при смене выбранного элемента в текущем (старшем) элементе SELECT (по его событию onChange) и изменяет содержимое зависимого селекта на основании значения выбранного в старшем селекте. syncList.prototype._sync = function (firstSelectId, secondSelectId) { var firstSelect = document.getElementById(firstSelectId); var secondSelect = document.getElementById(secondSelectId); secondSelect.length = 0; //обнуляем второй (подчиненный) SELECT if (firstSelect.length>0)//если первый (старший) SELECT не пуст { //из свойства dataList, с данными для заполнения подчиненных селектов, берем ту часть данных, которая соответствует именно значению элемента, //выбранного в первом селекте, и определяет содержимое подчиненного элемента SELECT. var optionData = this.dataList[ firstSelect.options[firstSelect.selectedIndex==-1 ? 0 : firstSelect.selectedIndex].value ]; //заполняем второй (подчиненный) селект значениями (создаем элементы option) for (var key in optionData || null) secondSelect.options[secondSelect.length] = new Option(optionData[key], key); //если в старшем SELECT-е нет выделенного пункта, выделяем первый if (firstSelect.selectedIndex == -1) setTimeout( function(){ firstSelect.options[0].selected = true;}, 1 ); //если во втором списке нет выделенного пункта, выделяем первый его пункт if (secondSelect.length>0) setTimeout( function(){ secondSelect.options[0].selected = true;}, 1 ); } //если второй (подчиненный) селект имеет в свою очередь свои подчиненные селекты (те, для которых он главный), //то запускаем его обработчик onchange, чтобы изменить его подчиненные селекты secondSelect.onchange && secondSelect.onchange(); }; Во втором списке if (template.options[i].value == DEFUALT_TEMPLATE) template.options[i].selected=true; - не выполняется. В чем ошибка? |
| Часовой пояс GMT +3, время: 04:30. |