взаимосвязанные выпадающие списки
У меня такая проблема: Я создал сайт с библиотеками smarty и php. У меня в php извлекается из бд несколько столбцов. В smarty сделан шаблон
<form action = "index.php?search=ok" method="POST" enctype="multipart/form-data"> <table border="0"> <tr> <td> <select name="ckod" id="select1"> <option value="0">Выберите страну</option> {foreach from=$cod item=new} {$new.id}<option value="{$new.id}" selected>{$new.countrycod}</option> {/foreach} </select> </td> <td> <select id="select2" name="country" style="display:none;"> {foreach from=$codcontry item=new2} {$new2.id}<option value="{$new2.cod_zone}">{$new2.cod_contry}</option> {/foreach} </select> </td> <td> <select name="rkod" id="select3" style="display:none;"> {foreach from=$reg item=new1} {$new1.id}<option value="{$new1.cod_def}">{$new1.cod_def}</option> {/foreach} </select> </td> Мне нужно чтобы при выборе одного элемента в первом списке выбиралась соответствующие элементы во втором. Типа как на сайтах знакомств при поиске и выборе страны, области и города. Появление самих списков и при выборе например России появлялись регионы России, а при выборе США появлялись списки регионов США. А при выборе регионов ещё список. Помогите! как это сделать ? |
То, что вы хотите сделать к серверной технологии имеет отношение только для выборки из базы данных. В основном же все делается с помощью js. Ищите по форуму, тема уже обсуждалась много раз.
|
понимаете. фишка в том что у меня извлекается и бд Mysql. И я нашел динамические списки но там не рассматривается. Как мне брать элементы если их нету. Извлекаются из бд.
|
пишите пожалуйста по русски, используя верные знаки пунктуации
нифига не понятно и тем не менее ваша задача решается прежде всего клиентской частью. будет ли применяться серверная часть, вообще дело десятое, но без клиентской части вам не обойтись посему советую перечитать статьи и етмы про динамические вопросы, а потом, осмыслив прочитанное, сформулировать свой вопрос, если он еще будет |
Вы хотите сказать, что самое главное это клиентская часть а не бд. Тогда проблема то в том что, у меня все списки извлекаются из бд таблицы и как мне связать javascript и бд как например на сайтах знакомств. Я не понимаю этого
|
Вы хотите сказать, что самое главное это клиентская часть а не бд. Тогда проблема то в том что, у меня все списки извлекаются из бд таблицы и как мне связать javascript и бд как например на сайтах знакомств. Я не понимаю этого. спасибо за помощь. Но если вы поможите будет лучше решить эту проблему.
|
Уважаемый, динамические списки уже далеко не новость, а часто используемая структура. Вам что, лень было поискать и почитать найденное? Материала-то куча, причем не где-нибудь, а прямо на первой странице выдачи.
|
я наверно не так описал ситуацию, понимаете у меня всё из базы выводить в эти списки и они должны появляться последовательно. когда выбираешь один из элементов. Например при выборе 1 должны имеено определенные числа( элементы обозначающие один в таблице) если их нету то загружается третий список и выбирается там соответствующие номеру один числа. и тд . Если не сложно вам помогите составить хотябы пример такого же. Я поглядел на пример со странами где выбираешь россию и загружается москва и тд города. но как мне реализовать с помощью бд. Если я извлек все данные тоесть 1, 2,3 соотвествуют своим элементам. тоесть 1 соответствует 920, 1 соответствует 930 и тд у меня так и идёт в одной таблице. Мне также с остальными, Что то похожее я нигде не видел там где вы сказали искать.
а Главное чтобы всё это было с помощью Jquery и ajax |
Ну так и подумайте, как, имея id из списка, получить с сервера связанные с ним данные. Пробуйте, если что-то не будет получаться - задавайте вопросы и приводите код. Если хотите готовый скрипт, то вам сюда.
|
Если я правильно понял - есть событие onchange.
Как только срабатывает событие, проверяешь что выбрал пользователь и отправляешь AJAX запрос на сервер для получения нового списка. |
Вот теперь надо, чтобы это понял топик-стартер
|
понимаете, у меня все списки из базы данных. нужно чтобы когда я выбрал из первого списка например единицу появлялся второй список со своим диапазоном из бд где этот диапазон элементов равен 1. и тд. так как у меня не известны числа.. Если бы знать как получить доступ к элументу одного из options можно было просто запрограммировать что и как выводить во втором списке и тд. Я не давно изучаю Jquery и тем более ajax поэтому и спрашиваю вас. Как мне это сделать ? Хотябы пример моего бы случая.
|
ваш случай стандартен чуть менее чем полностью
для него есть куча примеров на всех возможный фреймворках, и чистом JS даже в гугле, первой строкой по "javascript динамические списки" вылазит то, что вам нужно, только без ajax читайте, повторяйте, учите, пробуйте если что-то конкретное не будет получатся, то задавайте конкретные вопросы. на общий вам уже дали ответ если у вас совсем нчиего не поулчается, то вам в раздел работа |
ajaxcascade.php
$db = mysql_connect("localhost", "alloall", "12345");
mysql_select_db("alloall",$db);
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
if ($_GET['cod_country'] == 1) {
$a = mysql_query("SELECT id, cod_contry FROM alloall_code WHERE cod_zone=1");
// Так как запрос возвращает несколько строк, применяем цикл
print "[";
while($b = mysql_fetch_array($a))
{
print "{value:\"".$b['id']."\",text:\"".$b['cod_contry']."\"}"; //создаем циклический список
}
print "]";
}
else {echo "mysql_error";
exit();
}
}
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
<!--
.alloallru {
font-family: Mistral;
font-size: 40x;
font-weight: bold;
}
-->
</style>
<link href="tpl/templates/css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" src="tpl/templates/js/jquerykeypad.js"></script>
<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 = $('#cod_country').val();
var tmpSelect = $('#cod_contry');
if(countryValue.length == 0) {
tmpSelect.attr('disabled','disabled');
tmpSelect.clearSelect();
adjustModel();
} else {
$.getJSON('ajaxcascade.php',{cod_country:countryValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); adjustModel(); });
}
};
// выбор модели
function adjustModel(){
var countryValue = $('#cod_country').val();
var autoValue = $('#cod_contry').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',''); });
}
};
$('#cod_country').change(function(){
adjustAuto();
}).change();
$('#cod_contry').change(adjustModel);
$('#model').change(function(){
if($(this).val().length != 0) { alert('Выбор сделан!'); }
});
});
</script>
</head>
<body>
<h3 align="left">Введите номер для поиска</h3>
<form action = "" method="POST" enctype="multipart/form-data">
<table border="0">
<tr>
<td>
<select id="cod_country">
<option value="">Выбрать страну</option>
<option value="1">Германия</option>
<option value="2">Ю.Корея</option>
<option value="3">Япония</option>
</select>
</div>
</td>
<td>
<select id="cod_contry" name="cod_contry" disabled="disabled"></select>
</td>
<td>
<select id="model" name="cod_def" disabled="disabled"></select>
</td>
<td width="100%">
<input type="text" name = "nkod" id="defaultKeypad">
<strong>@allo<span class="alloallru">all</span>.ru</strong>
<input type="submit" value="Поиск" name="submit">
</form>
</td>
</tr>
<tr>
<td><div id="div"></div></td>
</tr>
</table>
</body>
</html>
Покажите мне ошибку в этом коде? Я сижу не понимаю |
Форматируй текст
|
но что форматировать.? мне нужно соединение с бд.. может кто поможет?
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Отформатировал код.. подскажите что нить?
|
У вас создается массив объектов. А чем вы разделяете элементы? И вообще, есть функция json_encode, если что.
|
я как бы создал шаблон. И делаю его в цикле. А json encode нету. Пробывал по разному делать циклы и всё равно он понимает только своё. А переменные он не понимает.
|
А вы начало моего сообщения принципиально не заметили? Посмотрите на текст json, который сгенерится после вашего цикла. Там ошибку и найдете.
|
всё вроде правильно..
if ($_GET['cod_country'] == 1) {
$db = mysql_connect("localhost", "alloall", "12345");
mysql_select_db("alloall",$db);
$items=mysql_query('SELECT id, cod_contry FROM alloall_code WHERE cod_zone=1');
print '[';
while ($a = mysql_fetch_array($items));
{
print "{value:\"".$a['id']."\",text:\"".$a['cod_contry']."\"},";
}
print ']';
}
не получается создать разделители... он вроде загружает но поле пустое.. хотя раньше вообще было disabled |
Вообще по правилам имена полей тоже должны быть в двойных кавычках. И зачем вы используете экранирование? Не проще ли внешние кавычки сделать одинарными? У вас же все равно подстановка не используется.
|
всё равно не работает.
print '{"value":'.$a['id'].'"text":'.$a['cod_contry'].'}';
|
А вы каждый приведенный листинг здесь руками пишете или копируете из живого кода? Т.к. в каждом у вас ошибка и всегда разная.
Раз уж нельзя воспользоваться json_encode (с которым задача решылись бы в разы проще), придется по старинке:
$json = '';
while ($a = mysql_fetch_assoc($items)){
$json .= ($json ? ',' : '') . '{"value" : "' . $a['id'] . '", "text" : "' . addslashes($a['cod_country']) . '"}';
}
if ($json)
echo '[' . $json . ']';
|
вот что получилось в php
<?
header('Content-Type: text/html; charset=windows-1251');
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
$db = mysql_connect("localhost", "alloall", "12345");
mysql_select_db("alloall",$db);
if ($_GET['cod_country'] == 1) {
$items=mysql_query('SELECT id, cod_contry FROM alloall_code WHERE cod_zone=1');
$json = '';
while ($a = mysql_fetch_assoc($items)){
$json .= ($json ? ',' : '') . '{"value" : "' . $a['id'] . '", "text" : "' . addslashes($a['cod_country']) . '"}';
}
if ($json)
echo '[' . $json . ']';
?>
всё равно не работает. |
Не работает - это не ответ. Что именно не работает? Неправильный ответ сервера, отсутствие данных? И кстати, ответ по правилам должен быть на в windows-1251, а в UTF-8.
|
данные извлеклись тока самих данных нету. Тоесть появились пустые поля. и сколько их должно быть для данных.
|
Ну тогда это уже сами ищите. Проверяйте правильность запроса и т.д.
|
всё заработало.. главное шаблон хоть есть.. остальное я попытаюсь сам сделать. А если я использую не Html Шаблон а .tpl
smarty. куда мне кидать файлы php рядом в этой же папке где .tpl? или лучше как то подругому сделать? |
Это вопрос уже совсем из другой оперы. Посмотрите как сделано подобное в распространенных cms, поищите статьи (не знаю, может и есть, сам не искал) или придумайте свое решение. Также может зависеть от конкретной задачи.
|
smarty must die :)
|
Цитата:
|
Правила неписанные, решает, конечно, каждый для себя. Но ИМХО лучше таки так.
|
Цитата:
|
Значит я просто сам уже напутал - видать сказалось то, что мне давно не приходилось делать проекты не в юникоде...
|
мне нужно дописать ещё скрипт к тому что я уже здесь кидал... Чтобы не только был следующий список но и выводилось в <Div> страну..
Я думал аналогичным способом, но не получается...
function zone() {
var countryValue = $('#cod_country').val();
var zoneValue = $('#zone');
$.getJSON('ajaxcascadezone.php',{cod_country:countryValue},function(jsonObject){zoneValue.html("")});
};
|
xDMK,
Добрый вечер... У меня проблема как ваша, только я со смарти не работал вообще. Можно ваш код сюда выложить? А я вам вышлю код с загрузкой городов во второй селект через гетДЖСОН. Предлагаю бартер |
| Часовой пояс GMT +3, время: 00:50. |