Web-мастер: курс молодого бойца

выпадающий список с обновлением из базы данных

 Страницы: 1 | 2 | 3 ... >>
 

 Добавлено 2008-06-17 07:51:04
XANSHQ


Сообщений: 135
Зарегистрирован: 12.01.2008

Цитировать
Этот вопрос рассматривали,но есть один момент:
Допустим у нас есть три таблицы:районы,города,магазины.

При выборе района страница перегружается,и список городов обновляется,список магазинов пока остается пустым.

При выборе города страница перегружается,и список магазинов обновляется.

Все данные берутся из БД.

Как это можно реализовать на PHP с частичным применением JS.
Без AJAX-a.

Благодарю за внимание.


Люблю Java молотый..
Наверх  Посмотреть профиль   Сайт автора Отредактировано автором 17.06.2008

 Добавлено 2008-06-17 09:58:10
evgenijj
Модератор




Сообщений: 1371
Зарегистрирован: 09.11.2007

Цитировать
Вообще, здесь возможны три варианта реализации.

Первый - все действия выполняются на стороне сервера. Как только происходит выбор в первом <SELECT> мы отправляем (по событию onchange) данные на сервер и формируем второй список. После выбора во втором <SELECT> мы опять отправляем данные формы и формируем третий список. На случай, браузер не поддерживает JavaScript, мы должны изначально создать три списка со всеми возможными значениями.

Второй - все события происходят на стороне клиента. Массивы всех возможных значений списков формируются на сервере и записываются в JavaScript-массив. Как только происходит выбор в первом <SELECT> мы формируем (по событию onchange) заново второй список - но уже средствами JavaScript. Пример такой реализации можно посмотреть здесь
Динамические выпадающие списки
JavaScript SELECT - динамические списки

Третий - использовать AJAX. Собственно, это комбинация первых двух вариантов. По событию onchange первого списка посылается запрос на сервер, чтобы получить возможные значения второго и третьего. Далее, функция обратного вызова формирует второй и третий списки. Далее, по событию onchange для второго - опять запрос на сервер, и формирование третьего списка.

Все три варианта описаны в статье
Реализация связанных списков

Реализация первого варианта:
<html>
<head>
<title>Select</title>
</head>
<body>
<?php
// Эти данные мы получаем из БД
$firstSelect = array( => 'Выберите'=> 'A'=> 'B'=> 'C' );
  
// Если данные формы еще не были отправлены
if ( $_SERVER['REQUEST_METHOD'] != 'POST' ) {
  echo 
'<form action="'.$_SERVER['PHP_SELF'].'" method="post">'."\n";
  echo 
'<select name="first" onchange="this.form.submit();">'."\n";
  foreach ( 
$firstSelect as $key => $value ) {
    echo 
'<option value="'.$key.'">'.$value.'</option>'."\n";
  }
  echo 
'</select>'."\n";
  echo 
'</form>'."\n";
  die();


echo 
'<form action="'.$_SERVER['PHP_SELF'].'" method="post">'."\n";
// Это случай, когда пользователь выбрал значение из первого списка
if ( isset( $_POST['first'] ) and !isset( $_POST['second'] ) ) { 
  
$first = (int)$_POST['first'];
  if ( 
$first == ) {
    
header'Location: '.$_SERVER['PHP_SELF'] );
    die();
  }
  
// Эти данные мы получаем из БД
  
switch ( $first ) {
    case 
1$secondSelect = array( => 'Выберите'=> 'A-A'=> 'A-B'=> 'A-C' ); break;
    case 
2$secondSelect = array( => 'Выберите'=> 'B-A'=> 'B-B'=> 'B-C' ); break;
    case 
3$secondSelect = array( => 'Выберите'=> 'C-A'=> 'C-B'=> 'C-C' ); break;
  }
  
// первый список
  
echo '<select name="first" onchange="this.form.submit();">'."\n";
  foreach ( 
$firstSelect as $key => $value ) {
    if ( 
$key == $first )
      echo 
'<option value="'.$key.'" selected>'.$value.'</option>'."\n";
    else
      echo 
'<option value="'.$key.'">'.$value.'</option>'."\n";
  }
  echo 
'</select>'."\n";
  
// второй список
  
echo '<select name="second" onchange="this.form.submit();">'."\n";
  foreach ( 
$secondSelect as $key => $value ) {
    if ( 
$key == $second )
      echo 
'<option value="'.$key.'" selected>'.$value.'</option>'."\n";
    else
      echo 
'<option value="'.$key.'">'.$value.'</option>'."\n";
  }
  echo 
'</select>'."\n";


// Это случай, когда пользователь выбрал значение из второго списка
if ( isset( $_POST['first'] ) and isset( $_POST['second'] ) ) {
  
$first = (int)$_POST['first'];
  
$second = (int)$_POST['second'];
  if ( 
$second == ) {
    
header'Location: '.$_SERVER['PHP_SELF'] );
    die();
  }
  
// Эти данные мы получаем из БД
  
switch ( $first ) {
    case 
1:
      
$secondSelect = array( => 'Выберите'=> 'A-A'=> 'A-B'=> 'A-C' );    
      switch ( 
$second ) {
        case 
1$thirdSelect =  array( => 'Выберите'=> 'A-A-A'=> 'A-A-B'=> 'A-A-C' ); break;
        case 
2$thirdSelect =  array( => 'Выберите'=> 'A-B-A'=> 'A-B-B'=> 'A-B-C' ); break;
        case 
3$thirdSelect =  array( => 'Выберите'=> 'A-C-A'=> 'A-C-B'=> 'A-C-C' ); break;
      }
      break;
    case 
2:
      
$secondSelect = array( => 'Выберите'=> 'B-A'=> 'B-B'=> 'B-C' );    
      switch ( 
$second ) {
        case 
1$thirdSelect =  array( => 'Выберите'=> 'B-A-A'=> 'B-A-B'=> 'B-A-C' ); break;
        case 
2$thirdSelect =  array( => 'Выберите'=> 'B-B-A'=> 'B-B-B'=> 'B-B-C' ); break;
        case 
3$thirdSelect =  array( => 'Выберите'=> 'B-C-A'=> 'B-C-B'=> 'B-C-C' ); break;
      }
      break;
    case 
3:
      
$secondSelect = array( => 'Выберите'=> 'C-A'=> 'C-B'=> 'C-C' );
      switch ( 
$second ) {
        case 
1$thirdSelect =  array( => 'Выберите'=> 'C-A-A'=> 'C-A-B'=> 'C-A-C' ); break;
        case 
2$thirdSelect =  array( => 'Выберите'=> 'C-B-A'=> 'C-B-B'=> 'C-B-C' ); break;
        case 
3$thirdSelect =  array( => 'Выберите'=> 'C-C-A'=> 'C-C-B'=> 'C-C-C' ); break;
      }
      break;
  }
  
// первый список
  
echo '<select name="first" onchange="this.form.submit();">'."\n";
  foreach ( 
$firstSelect as $key => $value ) {
    if ( 
$key == $first )
      echo 
'<option value="'.$key.'" selected>'.$value.'</option>'."\n";
    else
      echo 
'<option value="'.$key.'">'.$value.'</option>'."\n";
  }
  echo 
'</select>'."\n";
  
// второй список
  
echo '<select name="second" onchange="this.form.submit();">'."\n";
  foreach ( 
$secondSelect as $key => $value ) {
    if ( 
$key == $second )
      echo 
'<option value="'.$key.'" selected>'.$value.'</option>'."\n";
    else
      echo 
'<option value="'.$key.'">'.$value.'</option>'."\n";
  }
  echo 
'</select>'."\n";
  
// третий список
  
echo '<select name="third">'."\n";
  foreach ( 
$thirdSelect as $key => $value ) {
    echo 
'<option value="'.$key.'">'.$value.'</option>'."\n";
  }
  echo 
'</select>'."\n";
  echo 
'<input type="submit" name="submitForm" value="Отправить" />'."\n";
}

echo 
'</form>'."\n";

if ( isset( 
$_POST['submitForm'] ) ) {
  echo 
'Ваш выбор: '.$_POST['first'].', '.$_POST['second'].', '.$_POST['third'];
}
?>
</body>
</html>



Денежные купюры пронумерованы для того, чтобы когда-нибудь я мог сложить их все одну к одной, по порядку.
Наверх  Посмотреть профиль   Сайт автора Отредактировано автором 25.06.2008

 Добавлено 2008-06-19 00:29:09
XANSHQ


Сообщений: 135
Зарегистрирован: 12.01.2008

Цитировать
Evgeniyy,получилось вот енто

<?php
/* DYNAMIC SELECT*/
//
include_once('connect.ini');
//
mysql_connect($host,$user,$pass);
mysql_select_db($db);
//
$first_select_query="SELECT * FROM Towns";
$first_out=mysql_query($first_select_query);
//

// Если данные формы еще не были отправлены
if ( $_SERVER['REQUEST_METHOD'] != 'POST' ) {
  echo 
'<form action="'.$_SERVER['PHP_SELF'].'" method="post">'."\n";
  echo 
'<select name="first" onchange="this.form.submit();">'."\n";
  echo 
'<option selected value="town">town</option>';
  
$i=0;
  while(
$first_res=mysql_fetch_array($first_out)) {
  echo 
'<option value="'.$first_res['town_id'].'">'.$first_res['town_name'].'</option>';
  
$i++;
  }
  echo 
'</select>'."\n";
  echo 
'<select><option>district</option></select>';
  echo 
'<select><option>school</option></select>';
  echo 
'</form>'."\n";
  die();
}

//form
echo '<form action="'.$_SERVER['PHP_SELF'].'" method="POST">';

/*FIRST SELECT*/
if ( isset( $_POST['first'] ) and !isset( $_POST['second'] ) ) { 
  
$first $_POST['first'];
  if ( 
$first == "town" ) {
    
header'Location: '.$_SERVER['PHP_SELF'] );
    die();
  }
  
//first select
echo '<select name="first" onchange="this.form.submit();">';
  
$i=0;
  while(
$first_res=mysql_fetch_array($first_out)) {
  if(
$first_res['town_id']==$first) {
  echo 
'<option value="'.$first_res['town_id'].'" selected>'.$first_res['town_name'].'</option>';
  }
  else {
  echo 
'<option value="'.$first_res['town_id'].'">'.$first_res['town_name'].'</option>';
  }
  
$i++;
  }
echo 
'</select>';
//

//second query
$second_select_query="SELECT * FROM Districts WHERE(link_town_id='$first')";
$second_out=mysql_query($second_select_query);
//
//second select
echo '<select name="second" onchange="this.form.submit();">';
echo 
'<option selected value="district">district</option>';
$i=0;
while(
$second_res=mysql_fetch_array($second_out)) {
echo 
'<option value="'.$second_res['distr_id'].'" >'.$second_res['distr_name'].'</option>';
$i++;
}
echo 
'</select>';

echo 
'<select><option>school</option></select>';

}
/*END OF FIRST SELECT*/


/*SECOND SELECT*/
if ( isset( $_POST['first'] ) and isset( $_POST['second'] ) ) { 
  
$second $_POST['second'];
  if ( 
$second == "district" ) {
    
header'Location: '.$_SERVER['PHP_SELF'] );
    die();
  }
  
//first select
echo '<select name="first" onchange="this.form.submit();">';
  
$i=0;
  while(
$first_res=mysql_fetch_array($first_out)) {
  if(
$first_res['town_id']==$first) {
  echo 
'<option value="'.$first_res['town_id'].'" selected>'.$first_res['town_name'].'</option>';
  }
  else {
  echo 
'<option value="'.$first_res['town_id'].'">'.$first_res['town_name'].'</option>';
  }
  
$i++;
  }
echo 
'</select>';
//

//second query
$second_select_query="SELECT * FROM Districts WHERE(link_town_id='$first')";
$second_out=mysql_query($second_select_query);
//
//second select
echo '<select name="second" onchange="this.form.submit();">';
$i=0;
while(
$second_res=mysql_fetch_array($second_out)) {
if(
$second_res['distr_id']==$second) {
echo 
'<option value="'.$second_res['distr_id'].'" selected>'.$second_res['distr_name'].'</option>';
}
else {
echo 
'<option value="'.$second_res['distr_id'].'">'.$second_res['distr_name'].'</option>';
}
$i++;
}
echo 
'</select>';
//

//third query
$third_select_query="SELECT * FROM School WHERE(link_distr_id='$second')";
$third_out=mysql_query($third_select_query);
//
//third select
echo '<select name="third" onchange="this.form.submit();">';
$i=0;
while(
$third_res=mysql_fetch_array($third_out)) {
if(!isset(
$third)) {
echo 
'<option >school</option>';
}
if(
$third_res['sch_id']==$third) {
echo 
'<option value="'.$third_res['sch_id'].'" selected>'.$third_res['sch_name'].'</option>';
}
else {
echo 
'<option value="'.$third_res['sch_id'].'">'.$third_res['sch_name'].'</option>';
}
$i++;
}
echo 
'</select>';

echo 
'<input type="submit" name="submitForm" value="send" />'."\n";

}
/*END OF SECOND SELECT*/

echo '</form>';

if ( isset( 
$_POST['submitForm'] ) ) {
  echo 
'Your choise: '.$_POST['first'].', '.$_POST['second'].', '.$_POST['third'];
 
 }
//
mysql_close();
?>

своим кодом я недоволен...((

пожалуйста объясни детально принцип действия
onchange=this.form.submit()
так как вся изюминка именно в этом..


Люблю Java молотый..
Наверх  Посмотреть профиль   Сайт автора Отредактировано автором 19.06.2008

 Добавлено 2008-06-19 09:39:05
evgenijj
Модератор




Сообщений: 1371
Зарегистрирован: 09.11.2007

Цитировать
XANSHQ пишет:
пожалуйста объясни детально принцип действия
onchange=this.form.submit()
Да здесь особенно нечего объяснять: когда мы выбираем новое значение в выпадающем списке (событие onchange) - данные формы отправляются на сервер (запись this.form.submit() означает, что из элемента формы this мы обращаемся к элементу form и делаем отправку). Вообще, эта реализация не очень удачная: во-первых, сложна для понимания, во-вторых - здесь нет редиректов после отправки данных формы по событию onchange (зачем это нужно - можно почитать здесь).

Постараюсь объяснить принцип работы скрипта. Сначала на странице у нас только один выпадающий список first. Мы не выводим второй список, потому как его содержание зависит от первого.
<select name="first">
<option value="0">Выберите</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
Если мы сразу выведем второй список, то пользователь может выбрать комбинацию, которая недопустима. Например, в первом списке - значение "В", а во втором (вместо допустимых "B-A", "B-B", "B-C") - "C-A":
<select name="second">

<option value="0">Выберите</option>
<option value="1">A-A</option>
<option value="2">A-B</option>
<option value="3">A-C</option>

<option value="1">B-A</option>
<option value="2">B-B</option>
<option value="3">B-C</option>

<option value="1">C-A</option>
<option value="2">C-B</option>
<option value="3">C-C</option>

</select>
Поэтому, когда пользователь выберет значение из первого списка, мы отправляет его выбор на сервер, чтобы построить второй список. Для этого на сервере делаем выборку из БД
SELECT * FROM second_table WHERE first=2
Ну а далее вся процедура повторяется для третьего списка.
SELECT * FROM third_table WHERE first=2 AND second=3



Денежные купюры пронумерованы для того, чтобы когда-нибудь я мог сложить их все одну к одной, по порядку.
Наверх  Посмотреть профиль   Сайт автора Отредактировано автором 19.06.2008

 Добавлено 2008-06-19 14:52:17
evgenijj
Модератор




Сообщений: 1371
Зарегистрирован: 09.11.2007

Цитировать
Здесь как раз идеальная ситуация для использования AJAX.

form.php
<html>
<head>
<title>FORM</title>
<script type="text/javascript" src="ajax.js"> </script>
</head>
<body>
<?php
echo '<form action="'.$_SERVER['PHP_SELF'].'" method="post">'."\n";
// Эти данные мы получаем из БД
$firstSelect = array( => 'Выберите'=> 'A'=> 'B'=> 'C' ); 
echo 
'<select name="first" id="first" onchange="getList(this.value, \'\');">'."\n";
foreach ( 
$firstSelect as $key => $value ) {
  echo 
'<option value="'.$key.'">'.$value.'</option>'."\n";
}
echo 
'</select>'."\n";
echo 
'<select name="second" id="second" 
      onchange="getList(this.form.elements[\'first\'].value, this.value);">
      <option value="0">Выберите</option>
      </select>'
."\n";
echo 
'<select name="third" id="third"><option value="0">Выберите</option></select>'."\n";
echo 
'</form>'."\n";
?>
</body>
</html>

getList.php
<?php
// Если выбрано значение первого списка - формируем второй список
if ( !isset($_GET['secondValue']) ) {
  
// Эти данные мы получаем из БД
  
switch ( $_GET['firstValue'] ) {
    case 
0$secondSelect = array( => 'Выберите' ); break;
    case 
1$secondSelect = array( => 'Выберите'=> 'A-A'=> 'A-B'=> 'A-C' ); break;
    case 
2$secondSelect = array( => 'Выберите'=> 'B-A'=> 'B-B'=> 'B-C' ); break;
    case 
3$secondSelect = array( => 'Выберите'=> 'C-A'=> 'C-B'=> 'C-C' ); break;
  }
  
$secondOptions '<![CDATA[';
  foreach ( 
$secondSelect as $key => $value ) {
    
$secondOptions $secondOptions.'<option value="'.$key.'">'.$value.'</option>';
  }
  
$secondOptions $secondOptions.']]>';
  
$response '<?xml version="1.0" encoding="windows-1251" standalone="yes"?>'.
              
'<response>'.
                
'<action>'.
                
'makeSecondList'.
                
'</action>'.
                
'<options>'.
                
$secondOptions.
                
'</options>'.
              
'</response>';
} else { 
// Если выбрано значение второго списка - формируем третий список
  // Эти данные мы получаем из БД
  
switch ( $_GET['firstValue'] ) {
    case 
0
      
$thirdSelect = array( => 'Выберите' ); 
      break;
    case 
1:    
      switch ( 
$_GET['secondValue'] ) {
        case 
0$thirdSelect =  array( => 'Выберите' ); break;
        case 
1$thirdSelect =  array( => 'Выберите'=> 'A-A-A'=> 'A-A-B'=> 'A-A-C' ); break;
        case 
2$thirdSelect =  array( => 'Выберите'=> 'A-B-A'=> 'A-B-B'=> 'A-B-C' ); break;
        case 
3$thirdSelect =  array( => 'Выберите'=> 'A-C-A'=> 'A-C-B'=> 'A-C-C' ); break;
      }
      break;
    case 
2:    
      switch ( 
$_GET['secondValue'] ) {
        case 
0$thirdSelect =  array( => 'Выберите' ); break;
        case 
1$thirdSelect =  array( => 'Выберите'=> 'B-A-A'=> 'B-A-B'=> 'B-A-C' ); break;
        case 
2$thirdSelect =  array( => 'Выберите'=> 'B-B-A'=> 'B-B-B'=> 'B-B-C' ); break;
        case 
3$thirdSelect =  array( => 'Выберите'=> 'B-C-A'=> 'B-C-B'=> 'B-C-C' ); break;
      }
      break;
    case 
3:
      switch ( 
$_GET['secondValue'] ) {
        case 
0$thirdSelect =  array( => 'Выберите' ); break;
        case 
1$thirdSelect =  array( => 'Выберите'=> 'C-A-A'=> 'C-A-B'=> 'C-A-C' ); break;
        case 
2$thirdSelect =  array( => 'Выберите'=> 'C-B-A'=> 'C-B-B'=> 'C-B-C' ); break;
        case 
3$thirdSelect =  array( => 'Выберите'=> 'C-C-A'=> 'C-C-B'=> 'C-C-C' ); break;
      }
      break;
  }
  
  
$thirdOptions '<![CDATA[';
  foreach ( 
$thirdSelect as $key => $value ) {
    
$thirdOptions $thirdOptions.'<option value="'.$key.'">'.$value.'</option>';
  }
  
$thirdOptions $thirdOptions.']]>';
  
$response '<?xml version="1.0" encoding="windows-1251" standalone="yes"?>'.
              
'<response>'.
                
'<action>'.
                
'makeThirdList'.
                
'</action>'.
                
'<options>'.
                
$thirdOptions.
                
'</options>'.
              
'</response>';
}

header('Content-Type: text/xml');
echo 
$response;
?>

ajax.js
var request = null;
function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (trymicrosoft) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (othermicrosoft) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  if (request == null) alert("Ошибка при создании объекта XMLHttpRequest!");
}

function getList(firstValue, secondValue) {
  document.getElementById("third").innerHTML = '<option value="0">Выберите</option>';
  if ( secondValue == "" )
    url = "getList.php?firstValue=" + firstValue;
  else
    url = "getList.php?firstValue=" + firstValue + "&secondValue=" + secondValue;
  createRequest();
  request.open("GET", url, true);
  request.onreadystatechange = makeList;
  request.send(null);
}
 
function makeList() {
  // только при состоянии "complete"
  if (request.readyState == 4) {
    // для статуса "OK"
    if (request.status == 200) {
      // здесь идут построение списков заново
      responseXml = request.responseXML;
      xmlDoc = responseXml.documentElement;
      action = xmlDoc.getElementsByTagName("action")[0].firstChild.data;
      options = xmlDoc.getElementsByTagName("options")[0].firstChild.data;
      if ( action == "makeSecondList" )
        document.getElementById("second").innerHTML = options;
      else
        document.getElementById("third").innerHTML = options;
    } else {
      alert("Не удалось получить данные от сервера:\n" + request.statusText);
    }
  }
}

AJAX: реализация трех связанных списков


Денежные купюры пронумерованы для того, чтобы когда-нибудь я мог сложить их все одну к одной, по порядку.
Наверх  Посмотреть профиль   Сайт автора Отредактировано автором 23.07.2008
 Страницы: 1 | 2 | 3 ... >>
 
Быстрый ответ
 
Цвет шрифта: Закрыть все теги
Сообщение
Защитный код