Главная страницаСоздание сайтовБлог Кузнецова М.В.Статьи о PHPPHP-скриптыСтатьи об ApacheФорум С++КонсультацииФорум "Про Жизнь"
Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ 		Консультационный центр SoftTime

HTML+CSS+JavaScript
Вход  Регистрация  Список форумов  Живой форум  Архив  RSS-канал  Правила форума  Участники "Online"  Все участники

Выбрать другой форум

 

Здравствуйте, Посетитель!

 Новая тема

 Поиск

  Список тем

вид форума:
Линейный форум Структурный форум

тема: Не работает динамический select должным образом!

следующая тема
 
 автор: muravey   (18.01.2011 в 13:40)   письмо автору
  
 

Есть БД с регионами и городами...

Есть скрипт который выводит динамически по регионы города

<?php
    // Устанавливаем соединение с базой данных
      require_once("config/config.php");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Динамические выпадающие списки</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Динамические выпадающие списки на сайте XHTML по-русски!" />
<meta name="resourse-type" content="document" />
<meta name="author" content="Andrew M. Baranow info@xhtml.ru" />
<link href="http://xhtml.ru/2006/02/11/dynamic-select/" rel="home" hreflang="ru" />

<script type="text/javascript" src="script.js"></script>

<script type="text/javascript"><!--
window.onload = function() {
    dynamicSelect("Region", "City");
}
//--></script>

</head>
<body>

<form action="#" method="post">
 <select name="Region" id="Region">
     <option value="0">Выберите регион...</option>
<?php
    // Выводим список регионов
    $query = "SELECT * FROM powercounter_regions";
    $reg = mysql_query($query);
    if(mysql_num_rows($reg)>0)
    {
      while($region = mysql_fetch_array($reg))
      {
        echo "<option value=\"$region[region_id]\">$region[region_name]</option>/t";
      }
    }
?>
 </select>
 <select name="City" id="City">
  <option class="0" value="0">Выберите город...</option>
<?php
     // Выводим список городов
    $query = "SELECT * FROM powercounter_cities";
    $cit = mysql_query($query);
    if(mysql_num_rows($cit)>0)
    {
      while($city = mysql_fetch_array($cit))
      {
        echo"<option class=\"$city[region_id]\" value=\"$city[city_id]\">$city[city_name]</option>/t";
      }
    }
?>
 </select>
</form>
</body>
</html>


JavaScript

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[i].className.match(pattern1) ||
  clonedOptions[i].className.match(pattern2)) {

// его нужно клонировать в динамически создаваемый список

   sel2.appendChild(clonedOptions[i].cloneNode(true));
  }
 }
}

// Вызов скрипта при загрузке страницы

window.onload = function() {
    dynamicSelect("Country", "City");
}


Все работает.
Но вопрос:
- что нуно отредакт в JavaScripte, чтобы при передаче post номер региона и номер города также в inputax сразу вылазил регион с выбранным городом?

  Ответить  
 
 автор: muravey   (18.01.2011 в 13:55)   письмо автору
  
   для: muravey   (18.01.2011 в 13:40)
 

След код выводит только регион но не подставляет город

<?php
    // Устанавливаем соединение с базой данных
      require_once("config/config.php");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Динамические выпадающие списки</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Динамические выпадающие списки на сайте XHTML по-русски!" />
<meta name="resourse-type" content="document" />
<meta name="author" content="Andrew M. Baranow info@xhtml.ru" />
<link href="http://xhtml.ru/2006/02/11/dynamic-select/" rel="home" hreflang="ru" />

<script type="text/javascript" src="script.js"></script>

<script type="text/javascript"><!--
window.onload = function() {
    dynamicSelect("Region", "City");
}
//--></script>

</head>
<body>
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
<form action="#" method="post">
 <select name="Region" id="Region">
     <option value="0">Выберите регион...</option>
<?php
    // Выводим список регионов
    $query = "SELECT * FROM powercounter_regions";
    $reg = mysql_query($query);
    if(mysql_num_rows($reg)>0)
    {
      while($region = mysql_fetch_array($reg))
      {
          if($_POST['Region'] == $region['region_id'])
            echo "<option value=\"$region[region_id]\" selected>$region[region_name]</option>/t";
        else echo "<option value=\"$region[region_id]\">$region[region_name]</option>/t";
      }
    }
?>
 </select>
 <select name="City" id="City">
  <option class="0" value="0">Выберите город...</option>
<?php
     // Выводим список городов
    $query = "SELECT * FROM powercounter_cities";
    $cit = mysql_query($query);
    if(mysql_num_rows($cit)>0)
    {
      while($city = mysql_fetch_array($cit))
      {
        if($_POST['City'] == $city['city_id'])
            echo"<option class=\"$city[region_id]\" value=\"$city[city_id]\" selected>$city[city_name]</option>/t";
        else echo"<option class=\"$city[region_id]\" value=\"$city[city_id]\">$city[city_name]</option>/t";
      }
    }
?>
 </select>
 <input type="submit" name="bottom" value="Проверка">
</form>
</body>
</html>


Хотя в просмотре HTML браузера след selected подставляется. Что не так?

  Ответить  
 
 автор: muravey   (19.01.2011 в 11:20)   письмо автору
  
   для: muravey   (18.01.2011 в 13:40)
 

Кто знает JavaScript? Вы можете мне помочь?

  Ответить  
 
 автор: sim5   (19.01.2011 в 11:47)   письмо автору
  
   для: muravey   (19.01.2011 в 11:20)
 

Чего-то наварочено, не понять чего. Если вопрос касается JS, то будьте добры предоставлять списки, а не запросы к базе, дабы видеть реальное и соотносить его с вашим вопросом.
Лично я не понял, к чему тут JS, если вы списки формируете на сервере, а запросов к серверу нет для получения дочернего списка (как это обычно делается). Ну если вы все вываливаете клиенту, то, как я уже и сказал, показывайте списки.

  Ответить  
 
 автор: muravey   (19.01.2011 в 12:27)   письмо автору
  
   для: sim5   (19.01.2011 в 11:47)
 

Попробуйте эти скрипты
index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Динамические выпадающие списки</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta name="description" content="Динамические выпадающие списки" />
<link href="http://xhtml.ru/2006/02/11/dynamic-select/" rel="home" hreflang="ru" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";

$country = array( array ("1", "Россия"),
                  array ("2", "Украина"),
                  array ("3", "Белорусь")
                 );
$city = array( array ("1", "1", "Москва"),
                  array ("1", "2", "Санкт-Петербкрг"),
                  array ("1", "3", "Екатеринбург")
                 );
?>
<form action="#" method="post">
 <select name="Country" id="Country">
     <option value="0">Выберите страну...</option>
<?php
    // Выводим список стран
    foreach($country as $k=>$v)
      {
          if($_POST['Country'] == $v[0])
            echo "<option value=\"$v[0]\" selected>$v[1]</option>/t";
        else echo "<option value=\"$v[0]\">$v[1]</option>/t";
      }
?>
 </select>
 <select name="City" id="City">
  <option class="0" value="0">Выберите город...</option>
<?php
     // Выводим список городов
    foreach($city as $k=>$v)
      {
          if($_POST['City'] == $v[1])
            echo "<option class=\"$v[0]\" value=\"$v[1]\" selected>$v[2]</option>/t";
        else echo "<option class=\"$v[0]\" value=\"$v[1]\">$v[2]</option>/t";
      }
?>
 </select>
 <input type="submit" name="bottom" value="Проверка">
</form>
</body>
</html>


script.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[i].className.match(pattern1) ||
  clonedOptions[i].className.match(pattern2)) {

// его нужно клонировать в динамически создаваемый список

   sel2.appendChild(clonedOptions[i].cloneNode(true));
  }
 }
}

// Вызов скрипта при загрузке страницы

window.onload = function() {
    dynamicSelect("Country", "City");
}


И все увидете сами...

  Ответить  
 
 автор: The Electronic Cat   (21.01.2011 в 21:55)   письмо автору
  
   для: muravey   (19.01.2011 в 12:27)
 

А когда закончишь, помой полы, Золушка...

  Ответить  
 
 автор: muravey   (22.01.2011 в 17:49)   письмо автору
  
   для: The Electronic Cat   (21.01.2011 в 21:55)
 

Этим ограничиваются твои знания по данной теме?

  Ответить  
 
 автор: The Electronic Cat   (22.01.2011 в 19:36)   письмо автору
  
   для: muravey   (22.01.2011 в 17:49)
 

По теме беседы с Вами? Боюсь, что да. И предлагаю этот пробел не восполнять.

По поводу кода:
у Вас на загрузку страницы повешен первый вызов функции, которая очищает список (кстати, это можно сделать без цикла указанием
sel2.options.length=0;

) и наполняет option'ами, взятыми у клона. В некоторых браузерах свойство selected при этом скопировано не будет. Зафиксируйте в функции значение sel2 до очищения и, при наличии соответствующего элемента option в новом наборе значений, установите его выбранным.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования