.....
<select id="select_country" onchange="java script:onChangeCountry();">....</select>
.....
<select id="select_organization">....</select>
связные списки, динамический select
Перешарил кучу форумов и сайтов. Пересмотрел много кода, не могу разобраться! Не понимаю как все устроено! Нужен пример!
есть база данных MySQL в ней 3 таблицы
1)Страна
2)Город
3)Организация
Столкнулся с проблемой при заполнении полей таблицы оргнизация! Нужно чтобы список организаций менялся в соответствии с выбранной страной!
p.s. если у вас есть понятный простой пример, для человека не знающего Ajax и не особо знающего Java Script, поделитесь... или если возможно сделать как-нибудь попроще, чем Ajax подскажите!
есть база данных MySQL в ней 3 таблицы
1)Страна
2)Город
3)Организация
Столкнулся с проблемой при заполнении полей таблицы оргнизация! Нужно чтобы список организаций менялся в соответствии с выбранной страной!
p.s. если у вас есть понятный простой пример, для человека не знающего Ajax и не особо знающего Java Script, поделитесь... или если возможно сделать как-нибудь попроще, чем Ajax подскажите!
Личный вам совет - разберитесь с Ajax'ом, там ничего сложного нет, а облегчение почувствуете немаленькое. Без него ваша задача практически нерешабельна (или с очень большими извращениями, для которых, кстати, знание JavaScript будет нужно едва ли не больше, чем для нормального решения через аякс).
А устроено все очень просто. Привожу самый простой пример, без асинхронных запросов.
Пусть есть некоторый PHP-скрипт print_organizations.php, получающий параметром выбранную страну и выводящий список организаций для нее (например, через двоеточия):
Теперь рассмотрим ваш JS. Пускай xmlHttp - переменная, содержащий объект аякса.
Ну и, очевидно, где-то по HTML-коду:
А устроено все очень просто. Привожу самый простой пример, без асинхронных запросов.
Пусть есть некоторый PHP-скрипт print_organizations.php, получающий параметром выбранную страну и выводящий список организаций для нее (например, через двоеточия):
Код:
<?php
$country_index = intval($_GET['country_index']);
// получить массив организаций для данной страны
$organizations = get_organizations($country_index);
// вывести список
echo implode(':', $organizations);
?>
$country_index = intval($_GET['country_index']);
// получить массив организаций для данной страны
$organizations = get_organizations($country_index);
// вывести список
echo implode(':', $organizations);
?>
Теперь рассмотрим ваш JS. Пускай xmlHttp - переменная, содержащий объект аякса.
Код:
function onChangeCountry() {
var countrySelect = document.getElementById('country_select');
var organizationsSelect = document.getElementById('organizations_select');
var currentOrganization = '';
var i = 0;
xmlHttp.open('get', 'organizations.php?country_index=' + countrySelect.selectedIndex, false);
xmlHttp.send(null);
// очистить перечень организаций
for (i = organizationsSelect.options.length-1; i >= 0; i--)
organizations.remove(i);
// начинаем добавлять
for (i = 0; i < xmlHttp.responseText.length; i++) {
if (xmlHttp.responseText.charAt(i) == ':') {
organizationsSelect.options[organizationsSelect.options.length] = new Option(currentOrganization);
currentOrganization = '';
} else
currentOrganization += xmlHttp.responseText.charAt(i);
}
if (currentOrganization != '')
organizationsSelect.options[organizationsSelect.options.length] = new Option(currentOrganization);
var countrySelect = document.getElementById('country_select');
var organizationsSelect = document.getElementById('organizations_select');
var currentOrganization = '';
var i = 0;
xmlHttp.open('get', 'organizations.php?country_index=' + countrySelect.selectedIndex, false);
xmlHttp.send(null);
// очистить перечень организаций
for (i = organizationsSelect.options.length-1; i >= 0; i--)
organizations.remove(i);
// начинаем добавлять
for (i = 0; i < xmlHttp.responseText.length; i++) {
if (xmlHttp.responseText.charAt(i) == ':') {
organizationsSelect.options[organizationsSelect.options.length] = new Option(currentOrganization);
currentOrganization = '';
} else
currentOrganization += xmlHttp.responseText.charAt(i);
}
if (currentOrganization != '')
organizationsSelect.options[organizationsSelect.options.length] = new Option(currentOrganization);
Ну и, очевидно, где-то по HTML-коду:
Код:
Цитата: Alexander92
Личный вам совет - разберитесь с Ajax'ом, там ничего сложного нет, а облегчение почувствуете немаленькое. Без него ваша задача практически нерешабельна (или с очень большими извращениями, для которых, кстати, знание JavaScript будет нужно едва ли не больше, чем для нормального решения через аякс).
смотрел здесь: http://www.freeartists.ru/articles/programming/ajax-selects/
на мой взгляд самое понятное в инете! гляньте наискосок если не сложно! это то что мне нужно? в самом конце!
Цитата: twi5ter
смотрел здесь: http://www.freeartists.ru/articles/programming/ajax-selects/
на мой взгляд самое понятное в инете! гляньте наискосок если не сложно! это то что мне нужно? в самом конце!
на мой взгляд самое понятное в инете! гляньте наискосок если не сложно! это то что мне нужно? в самом конце!
Да, это близко к тому, что вам нужно.
Перечитайте мой предыдущий пост, я пример набросал.
помогите найти косяк:
[HTML]
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function selectCity(){
var id_country = $('select[name="country"]').val();
$.ajax({
type: "POST",
url: "admin/cat8/organization/ajax.php",
data: { id_country: id_country },
cache: false,
success: function(responce){ $('div[name="selectDataCity"]').html(responce); }
});
};
</script>
<select size="1" name="country" onchange="java script: selectCity();" style="float:left;">
<option disabled selected>Выберите страну</option>
<option value="1">Россия</option>
<option value="2">Великобритания</option>
</select>
<div name="selectDataCity" style="float:left;"></div>
[/HTML]
файл ajax.php
Вот эта функция var id_country = $('select[name="country"]').val(); определяет значение id_country при изменении, а дальше то ли ajax.php не запускается(наиболее вероятно), то ли id_country туда не передается!
[HTML]
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function selectCity(){
var id_country = $('select[name="country"]').val();
$.ajax({
type: "POST",
url: "admin/cat8/organization/ajax.php",
data: { id_country: id_country },
cache: false,
success: function(responce){ $('div[name="selectDataCity"]').html(responce); }
});
};
</script>
<select size="1" name="country" onchange="java script: selectCity();" style="float:left;">
<option disabled selected>Выберите страну</option>
<option value="1">Россия</option>
<option value="2">Великобритания</option>
</select>
<div name="selectDataCity" style="float:left;"></div>
[/HTML]
файл ajax.php
Код:
echo '<select size="1" name="city">';
$result = mysql_query('SELECT * FROM `TABCITY` WHERE fk_country=? ORDER BY city_rus ASC', $_POST['id_country']) or die(mysql_error());
$num_rows=mysql_num_rows($result);
for($i=0;$i<$num_rows; $i++) {
$row=mysql_fetch_array($result);
echo '<option value="'.$row['pk_city'].'">'.$row['city_rus'].'</option>';
}
echo '</select>';
$result = mysql_query('SELECT * FROM `TABCITY` WHERE fk_country=? ORDER BY city_rus ASC', $_POST['id_country']) or die(mysql_error());
$num_rows=mysql_num_rows($result);
for($i=0;$i<$num_rows; $i++) {
$row=mysql_fetch_array($result);
echo '<option value="'.$row['pk_city'].'">'.$row['city_rus'].'</option>';
}
echo '</select>';
Вот эта функция var id_country = $('select[name="country"]').val(); определяет значение id_country при изменении, а дальше то ли ajax.php не запускается(наиболее вероятно), то ли id_country туда не передается!
Цитата: twi5ter
Код:
$result = mysql_query('SELECT * FROM `TABCITY` WHERE fk_country=? ORDER BY city_rus ASC', $_POST['id_country']) or die(mysql_error());
Это что за синтаксис? В mysql_query() вторым параметром может передаваться только ресурс MySQL-соединения. Насколько я знаю, на сегодняшнй день никаких "отложенных" аргументов там нет. Или я пропустил что-то в этой жизни? Напишите
Код:
$result = mysql_query('SELECT * FROM `TABCITY` WHERE fk_country='.$_POST['id_country'].' ORDER BY city_rus ASC') or die(mysql_error());
P.S. А что вы наблюдаете? Какая диагностика?
наблюдал я то, что если даже добавить в ту функцию, в которой формируется второй select просто вывод echo 'привет'; то привет, в div не выводится! стало быть и функция не вызывается из файла ajax.php
Цитата: Alexander92
Это что за синтаксис? В mysql_query() вторым параметром может передаваться только ресурс MySQL-соединения. Насколько я знаю, на сегодняшнй день никаких "отложенных" аргументов там нет. Или я пропустил что-то в этой жизни? Напишите
P.S. А что вы наблюдаете? Какая диагностика?
Код:
$result = mysql_query('SELECT * FROM `TABCITY` WHERE fk_country='.$_POST['id_country'].' ORDER BY city_rus ASC') or die(mysql_error());
P.S. А что вы наблюдаете? Какая диагностика?
Спасибо! Исправил! Проверил, дело как выяснилось не только в этом, ничего не заработало!
подробнее о том, что я наблюдаю:
1) выбираю страну из списка, по событию onchange перехожу в функцию function selectCity();
2) вход в функцию осуществляется корректно, далее выполняется операцияvar id_country = $('select[name="country"]').val();
id_country возвращается корректно, согласно выбранной стране, тестировал в отладчкие;
3) далее перехожу к
Код:
$.ajax({
type: "POST",
url: "admin/cat8/organization/ajax.php",
data: { id_country: id_country },
cache: false,
success: function(responce){ $('div[name="selectDataCity"]').html(responce); }
});
type: "POST",
url: "admin/cat8/organization/ajax.php",
data: { id_country: id_country },
cache: false,
success: function(responce){ $('div[name="selectDataCity"]').html(responce); }
});
которая должна запустить сценарий ajax.php, сформировать список городов и вернуть его вот сюда [HTML]<div name="selectDataCity" style="float:left;"></div>[/HTML]
но этого не происходит! правильно ли оформлен вот этот кусок кода?
Код:
$.ajax({
type: "POST",
url: "admin/cat8/organization/ajax.php",
data: { id_country: id_country },
cache: false,
success: function(responce){ $('div[name="selectDataCity"]').html(responce); }
});
type: "POST",
url: "admin/cat8/organization/ajax.php",
data: { id_country: id_country },
cache: false,
success: function(responce){ $('div[name="selectDataCity"]').html(responce); }
});