За последние 24 часа нас посетили 20347 программистов и 1577 роботов. Сейчас ищут 2244 программиста ...

динамический селект с перерисовкой

Тема в разделе "JavaScript и AJAX", создана пользователем dslychko, 24 мар 2010.

  1. dslychko

    dslychko Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    144
    Симпатии:
    0
    Есть 2 селекта
    PHP:
    1.             <td><select name=k1 ><option>'.$_GET["name"].'</option> ';
    2.                  $result2=mysql_query('SELECT name FROM klient ORDER BY name',$link) or die(mysql_errno($link).mysql_error($link));
    3.                     while($data2=mysql_fetch_array($result2)) {echo '<option>'.$data2[name].'</option> '; }
    4.            echo '</select></td>
    5.  
    6.             <td><select name=k2 > ';
    7.                  $result3=mysql_query('SELECT name FROM firm WHERE kli1 = "'.$name.'" or kli2 = "'.$name.'" OR kli3 = "'.$name.'" or kli4 = "'.$name.'" ORDER BY name',$link) or die(mysql_errno($link).mysql_error($link));
    8.                     while($data3=mysql_fetch_array($result3)) {echo '<option>'.$data3[name].'</option> '; }
    9.            echo '</select></td>
    Какую функцию OnСhange первого селекта написать, чтобы $name запроса второго селекта было значением первого селекта ?
    По форуму искал. Везде описаны методы с использованием style=display:none
    А мне нужно перерисовывать селект яваскриптом чтоли ? А не просто показывать его.
    Помогите пожалуйста. Желательно примером.
     
  2. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    http://www.php.ru/forum/viewtopic.php?t=9420&start=0
    ajax
    могу привести пример, у меня сделано, выбор страны, после выбора динамический составляется следующий селект с выбором региона
     
  3. dslychko

    dslychko Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    144
    Симпатии:
    0
    Видел, но динамики здесь мало
    [js] {
    '01':
    {
    'n':'Нет', // Значение:надпись в селекте
    'y':'Да'
    },
    'no_action':
    {
    'no_action':'----------'
    },
    '02':
    {
    '02.1':'02.1',
    '02.2':'02.2',
    '02.3':'02.3'
    },
    '03':
    {
    '10':'10',
    '90':'90',
    '100':'100'
    }[/js]
    Как вместо этого заполнять значениями из mysql ?
     
  4. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    либо на момент генерации страницы задавать в JS все нужные значения и рулить уже чистым JS
    либо аякс
     
  5. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    аяксом посылаете значение php скрипту, он делает выборку и генерирует новый селект, который вы вставляете в нужный блок
     
  6. dslychko

    dslychko Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    144
    Симпатии:
    0
    вот как это сделать скажите пожалуйста.
     
  7. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
  8. dslychko

    dslychko Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    144
    Симпатии:
    0
    А пример та рабочий ?

    Не наблюдалось в листинге этого. Какая функция на onchange отвечает ?
     
  9. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
     
  10. dslychko

    dslychko Активный пользователь

    С нами с:
    14 июн 2007
    Сообщения:
    144
    Симпатии:
    0
    Не работает у меня этот пример. Ничего не происходит когда выбираю страну.

    Работает это :

    index.php
    HTML:
    1. <title>Динамические селекты</title>
    2. <script type="text/javascript" language="javascript" >
    3.  
    4. var d = document;
    5. var div_select;
    6. var req = Create();
    7.  
    8. function Country()
    9. {
    10. div_select = "reg";    
    11. d.getElementById('city').innerHTML = '';
    12. var a = d.getElementById('country_id').value;
    13. query = "country_id="+a;
    14. Request(query);
    15. }
    16.  
    17. function Create(){  
    18.     if(navigator.appName == "Microsoft Internet Explorer"){  
    19.         req = new ActiveXObject("Microsoft.XMLHTTP");  
    20.     }else{  
    21.         req = new XMLHttpRequest();  
    22.     }  
    23.     return req;  
    24. }  
    25. function Request(query)
    26. {
    27. req.open('post', 'selects.php' , true );
    28. req.onreadystatechange = Refresh;
    29. req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    30. req.send(query);              
    31. }  
    32. function Refresh()
    33. {
    34. var a,b;
    35. a = req.readyState;
    36.     if( a == 4 )
    37.     {
    38.     b = req.responseText;  
    39.    
    40.     d.getElementById(div_select).innerHTML = b;
    41.     }
    42. }
    43.  
    44. </head>
    45. <?php
    46.  
    47. include ("connect.php");
    48.  
    49. mysql_connect( MYSQL_SERVER, MYSQL_USER, MYSQL_PASSWORD );
    50. @mysql_select_db( MYSQL_DATABASE );
    51. @mysql_query('SET NAMES utf8');
    52. @mysql_query('SET CHARACTER SET utf8');
    53. @mysql_query('SET COLLATION_CONNECTION="utf8_general_ci"');
    54.  
    55.  
    56. function country()
    57. {
    58. $country_id = isset($_POST['country_id'])?$_POST['country_id']:NULL;
    59.  
    60. $query = "SELECT * FROM main";
    61. $res = mysql_query($query);
    62. $select = "<select id=\"country_id\" name=\"country_id\" onchange=\"Country()\" >";
    63.     while($row = mysql_fetch_array($res))
    64.     {  $select .= "<option value='".$row['kto']."'>".$row['kto']."</option>\r\n";}
    65. $select .= "</select>";    
    66. return     $select;
    67. }
    68.  
    69. echo country();
    70.  
    71. ?>
    72. <div id="reg" ></div>
    73. <div id="city" ></div>
    74. </body>
    75. </html>
    selects.php
    PHP:
    1. <?php
    2. include ("connect.php");
    3.  
    4. function region()
    5. {
    6. $query = 'SELECT name FROM firm WHERE kli1 = "'.$_POST['country_id'].'" or kli2 = "'.$_POST['country_id'].'" OR kli3 = "'.$_POST['country_id'].'" or kli4 = "'.$_POST['country_id'].'" ORDER BY name';
    7. $res = mysql_query($query);
    8. $select = "<select id=\"region_id\" name=\"region_id\" >";
    9.  
    10.     while($row = mysql_fetch_array($res))
    11.     { $select .= "<option value='".$row['region_id']."'>".$row['name']."</option>\r\n"; }
    12.  
    13. $select .= "</select>";    
    14. return     $select;
    15.  
    16. }
    17.  
    18. //if(isset($_POST['country_id']))
    19. echo region();
    20.  
    21. ?>
    Только вот как это объединить в один документ ? Как передавать значение первого селекта в php и перерисовывать второй селект ?
     
  11. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    regions.php
    PHP:
    1. <?php
    2. if(isset($_POST['city'])){
    3. $city=$_POST['city'];
    4. setcookie('region',$city);
    5. header("Location:index.php");
    6. }
    7.  
    8. ?>
    9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    10. <html xmlns="http://www.w3.org/1999/xhtml">
    11. <head>
    12. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    13. <script language="JavaScript">
    14. http = false;
    15. try {
    16.    http = new XMLHttpRequest();
    17.  } catch (trymicrosoft) {
    18.    try {
    19.      http = new ActiveXObject("Msxml2.XMLHTTP");
    20.    } catch (othermicrosoft) {
    21.      try {
    22.        http = new ActiveXObject("Microsoft.XMLHTTP");
    23.      } catch (failed) {
    24.        http = false;
    25.      }
    26.    }
    27.  }
    28.  
    29.  if (!http)
    30.    alert("Error initializing XMLHttpRequest!");
    31.  
    32. function GetCountry(){
    33. document.getElementById("selectbutton").style.display="none";
    34. document.getElementById("select2").innerHTML='';
    35. document.getElementById("select3").innerHTML='';
    36. country=document.getElementById("select1").value;
    37. url = "select.php?country="+country;
    38. http.open("GET", url, false);
    39. http.onreadystatechange = ChangeSelect;
    40. http.send(null);
    41. }
    42.  
    43. function GetRegion(){
    44. document.getElementById("select3").innerHTML='';
    45. document.getElementById("selectbutton").style.display="none";
    46. region=document.getElementById("selectedregion").value;
    47. url = "select.php?region="+region;
    48. http.open("GET", url, false);
    49. http.onreadystatechange = ChangeSelect2;
    50. http.send(null);
    51. }
    52.  
    53.  
    54. function ChangeSelect() {
    55.     if ((http.readyState == 4) && (http.status == 200)){
    56.         document.getElementById("select2").innerHTML=http.responseText;
    57.     }
    58. }
    59.  
    60. function ChangeSelect2() {
    61.     if ((http.readyState == 4) && (http.status == 200)){
    62.         document.getElementById("select3").innerHTML=http.responseText;
    63.     }
    64. }
    65.  
    66. function SelectCity(){
    67. document.getElementById("selectbutton").style.display="block";
    68. }
    69. </script>
    70. </head>
    71. <body>
    72. <div style="padding:20px;background-color:#F5F5F5;border:1px solid #FF8C00;position:absolute;top:20%;left:20%">
    73. <center>
    74. <form method="POST" action="regions.php">
    75. <table style="border:1px solid black;">
    76. <tr>
    77.     <td style="width:160px">
    78.         Выберите страну
    79.     </td>
    80.     <td style="width:160px">
    81.         Выберите регион
    82.     </td>
    83.     <td style="width:160px">
    84.         Выберите город
    85.     </td>
    86.     <td rowspan="2">
    87.         <input type="submit" value="Выбрать" style="display:none" id="selectbutton" />
    88.     </td>
    89. </tr>
    90. <tr>
    91.     <td>
    92.         <select id="select1" multiple onChange="GetCountry()">
    93.             <option value="3159">Россия</option>
    94.             <option value="4">Австралия</option>
    95.             <option value="63">Австрия</option>
    96.             <option value="81">Азербайджан</option>
    97.             <option value="173">Ангуилья</option>
    98.             <option value="177">Аргентина</option>
    99.             <option value="245">Армения</option>
    100.             <option value="7716093">Арулько</option>
    101.             <option value="248">Беларусь</option>
    102.             <option value="401">Белиз</option>
    103.             <option value="404">Бельгия</option>
    104.             <option value="425">Бермуды</option>
    105.             <option value="428">Болгария</option>
    106.             <option value="467">Бразилия</option>
    107.             <option value="616">Великобритания</option>
    108.             <option value="924">Венгрия</option>
    109.             <option value="971">Вьетнам</option>
    110.             <option value="994">Гаити</option>
    111.             <option value="1007">Гваделупа</option>
    112.             <option value="1012">Германия</option>
    113.             <option value="1206">Голландия</option>
    114.             <option value="2567393">Гондурас</option>
    115.             <option value="277557">Гонконг</option>
    116.             <option value="1258">Греция</option>
    117.             <option value="1280">Грузия</option>
    118.             <option value="1366">Дания</option>
    119.             <option value="2577958">Доминиканская республика</option>
    120.             <option value="1380">Египет</option>
    121.             <option value="1393">Израиль</option>
    122.             <option value="1451">Индия</option>
    123.             <option value="277559">Индонезия</option>
    124.             <option value="277561">Иордания</option>
    125.             <option value="3410238">Ирак</option>
    126.             <option value="1663">Иран</option>
    127.             <option value="1696">Ирландия</option>
    128.             <option value="1707">Испания</option>
    129.             <option value="1786">Италия</option>
    130.             <option value="1894">Казахстан</option>
    131.             <option value="2163">Камерун</option>
    132.             <option value="2172">Канада</option>
    133.             <option value="582029">Карибы</option>
    134.             <option value="2297">Кипр</option>
    135.             <option value="2303">Киргызстан</option>
    136.             <option value="2374">Китай</option>
    137.             <option value="582040">Корея</option>
    138.             <option value="2430">Коста-Рика</option>
    139.             <option value="582077">Куба</option>
    140.             <option value="2443">Кувейт</option>
    141.             <option value="2448">Латвия</option>
    142.             <option value="2505884">Ливан</option>
    143.             <option value="582060">Ливан</option>
    144.             <option value="2509">Ливия</option>
    145.             <option value="2514">Литва</option>
    146.             <option value="2614">Люксембург</option>
    147.             <option value="582041">Македония</option>
    148.             <option value="277563">Малайзия</option>
    149.             <option value="582043">Мальта</option>
    150.             <option value="2617">Мексика</option>
    151.             <option value="582082">Мозамбик</option>
    152.             <option value="2788">Молдова</option>
    153.             <option value="2833">Монако</option>
    154.             <option value="2687701">Монголия</option>
    155.             <option value="582065">Морокко</option>
    156.             <option value="277551">Нидерланды</option>
    157.             <option value="2837">Новая Зеландия</option>
    158.             <option value="2880">Норвегия</option>
    159.             <option value="582051">О.А.Э.</option>
    160.             <option value="582105">Остров Мэн</option>
    161.             <option value="582044">Пакистан</option>
    162.             <option value="582046">Перу</option>
    163.             <option value="2897">Польша</option>
    164.             <option value="3141">Португалия</option>
    165.             <option value="3156">Реюньон</option>
    166.             <option value="277555">Румыния</option>
    167.             <option value="5681">США</option>
    168.             <option value="5647">Сальвадор</option>
    169.             <option value="277565">Сингапур</option>
    170.             <option value="582067">Сирия</option>
    171.             <option value="5666">Словакия</option>
    172.             <option value="5673">Словения</option>
    173.             <option value="5678">Суринам</option>
    174.             <option value="9575">Таджикистан</option>
    175.             <option value="277567">Тайвань</option>
    176.             <option value="582050">Тайланд</option>
    177.             <option value="582090">Тунис</option>
    178.             <option value="9638">Туркменистан</option>
    179.             <option value="277569">Туркмения</option>
    180.             <option value="9701">Туркс и Кейкос</option>
    181.             <option value="9705">Турция</option>
    182.             <option value="9782">Уганда</option>
    183.             <option value="9787">Узбекистан</option>
    184.             <option value="9908">Украина</option>
    185.             <option value="10648">Финляндия</option>
    186.             <option value="10668">Франция</option>
    187.             <option value="277553">Хорватия</option>
    188.             <option value="10874">Чехия</option>
    189.             <option value="582031">Чили</option>
    190.             <option value="10904">Швейцария</option>
    191.             <option value="10933">Швеция</option>
    192.             <option value="582064">Эквадор</option>
    193.             <option value="10968">Эстония</option>
    194.             <option value="3661568">ЮАР</option>
    195.             <option value="11002">Югославия</option>
    196.             <option value="11014">Южная Корея</option>
    197.             <option value="582106">Ямайка</option>
    198.             <option value="11060">Япония</option>
    199.         </select>
    200.     </td>
    201. <td>
    202.     <center>
    203.         <div id="select2"></div>
    204.     </center>
    205. </td>
    206. <td>
    207.     <center>
    208.         <div id="select3"></div>
    209.     </center>
    210. </td>
    211. </tr>
    212. </table>
    213. </form>
    214. </center>
    215. </div>
    216. </body>
    217. </html>
    select.php
    PHP:
    1. <?php
    2. $link = mysql_connect("localhost","root","")
    3.          or die("Could not connect: " . mysql_error());
    4. $db="reg";
    5. mysql_select_db($db)  or  die("$db:  ".mysql_error());
    6.  
    7. if(isset($_GET['country'])&&(is_numeric($_GET['country'])==true)){
    8. $country=$_GET['country'];
    9. $query="SELECT * FROM `region` WHERE `country_id`='$country'";
    10. $result=mysql_query($query,$link);
    11. echo '<select onChange="GetRegion()" multiple id="selectedregion">';
    12. while($row=mysql_fetch_array($result)){
    13. echo '<option value="'.$row['region_id'].'">'.$row['name'].'</option>';
    14. }
    15. echo '</select>';
    16. }
    17. if(isset($_GET['region'])&&(is_numeric($_GET['region'])==true)){
    18. $region=$_GET['region'];
    19.  
    20. $query="SELECT * FROM `city` WHERE `region_id`='$region'";
    21. $result=mysql_query($query,$link);
    22. echo '<select multiple id="select3" onChange="SelectCity()" name="city">';
    23. while($row=mysql_fetch_array($result)){
    24. echo '<option value="'.$row['name'].'">'.$row['name'].'</option>';
    25. }
    26. echo '</select>';
    27. }
    28. ?>
    дамп базы reg
    http://narod.ru/disk/12236000/rocid.sql.zip
     
  12. эждл

    эждл Активный пользователь

    С нами с:
    5 май 2010
    Сообщения:
    5
    Симпатии:
    0
    Padaboo, большое спасибо за код! Оч помог. Но не могу решить вопрос с отправкой введенных данных методом post. "Мучаю" Ваш код, подстраивая под себя.
    У меня 2 селекта, второй заполняется исходя из значений первого, затем введенные данные должны уйти почтой.

    index.php:
    Код (Text):
    1.  
    2. ...
    3. <script language="JavaScript" src="script.js"></script>
    4. ...
    5. <form name="form1" method="post" action="send_mail.php">
    6. <tr>
    7.   <td>Селект1</td>
    8.   <td>
    9.     <select name="send1" id="select1"  onChange="GetCountry()">
    10.       <option value="2">val1</option>
    11.       <option value="3">val2</option>
    12.     </select>
    13.   </td>
    14. </tr>
    15. <tr>
    16.   <td>Селект2:</td>
    17.   <td>
    18.     <div id="select2"></div>
    19.   </td>
    20. </tr>
    script.js:
    Код (Text):
    1.  
    2. http = false;
    3.  try {
    4.    http = new XMLHttpRequest();
    5.   } catch (trymicrosoft) {
    6.    try {
    7.      http = new ActiveXObject("Msxml2.XMLHTTP");
    8.    } catch (othermicrosoft) {
    9.      try {
    10.        http = new ActiveXObject("Microsoft.XMLHTTP");
    11.      } catch (failed) {
    12.        http = false;
    13.      }
    14.    }
    15.   }
    16.  
    17.   if (!http)
    18.    alert("Error initializing XMLHttpRequest!");
    19.  
    20.  function GetCountry(){
    21.  country=document.getElementById("select1").value;
    22.  url = "select.php?country="+country;
    23.  http.open("GET", url, false);
    24.  http.onreadystatechange = ChangeSelect;
    25.  http.send(null);
    26.  }
    27.  
    28.  function ChangeSelect() {
    29.      if ((http.readyState == 4) && (http.status == 200)){
    30.          document.getElementById("select2").innerHTML=http.responseText;
    31.     }
    32.  }
    select.php:
    Код (Text):
    1.  
    2. <?php
    3. $link = mysql_connect("localhost","root") or die("Could not connect: " . mysql_error());
    4. $db="t";
    5. mysql_select_db($db) or die("$db:  ".mysql_error());
    6.  
    7. if(isset($_GET['country'])&&(is_numeric($_GET['country'])==true))
    8. {
    9.    
    10.     $country=$_GET['country'];
    11.    
    12.     $query="SELECT * FROM t WHERE id='$country'";
    13.     $result=mysql_query($query,$link);
    14.     echo '<select name="send2">';
    15.     while($row=mysql_fetch_array($result))
    16.     {
    17.         echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
    18.     }
    19.     echo '</select>';
    20. }
    21. ?>
    ну и, наконец, send_mail.php:
    Код (Text):
    1.  
    2. <?php
    3. $msg=$_POST['select1'].$_POST['select2'];
    4. mail($to, $title, $msg, $from);
    5. ?>
    Send1 (значение первого селекта) отображается, а send2 (значение второго селекта) - нет
    Пробую в index.php ставить <div id="select2" name="send2"></div> - безрезультатно.

    Возможно, кто-нибудь подскажет, как послать постом данные в файл send_mail.php?
     
  13. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    эждл
    начну пожалуй с того что этот код не работает в FF http://www.php.ru/forum/viewtopic.php?t=25336
    где у вас не отображается значение второго селекта?
    интересно как отображается значение первого селекта если вы пытаетесь получить его по id?
    да , а разве можно POST в другой документ передавать? я думал он передается только внутри тела документа...
    я всегда в другой документ GET передаю ...
     
  14. эждл

    эждл Активный пользователь

    С нами с:
    5 май 2010
    Сообщения:
    5
    Симпатии:
    0
    ни постом, ни гетом не могу передать значение второго селекта. Из дива, уже убедилась :), нельзя
     
  15. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    эждл
    у вас имена send1 и send2
    если постом то как то так...
    PHP:
    1.  
    2. ...
    3. <script language="JavaScript" src="script.js"></script>
    4. ...
    5. <form name="form1" method="post" action="index.php">
    6. <tr>
    7.   <td>Селект1</td>
    8.   <td>
    9.     <select name="send1" id="select1"  onChange="GetCountry()">
    10.       <option value="2">val1</option>
    11.       <option value="3">val2</option>
    12.     </select>
    13.   </td>
    14. </tr>
    15. <tr>
    16.   <td>Селект2:</td>
    17.   <td>
    18.     <div id="select2"></div>
    19.   </td>
    20. <?php
    21.    if(isset($_POST['send1'])&&isset($_POST['send2'])){
    22.       echo 'Переданные данные '.$_POST['send1'].' '.$_POST['send2'];
    23.    }
    24. ?>
    25. </tr>
     
  16. эждл

    эждл Активный пользователь

    С нами с:
    5 май 2010
    Сообщения:
    5
    Симпатии:
    0
    Padaboo, спасибо большое за то, что ткнули носом в гет!!! все получилось!
     
  17. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    хоть на другой хост
     
  18. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    эждл
    хех, вот тут Luge подсказывает что не в методе было дело, а в $_POST['send1'] $_POST['send2']
    )))
     
  19. эждл

    эждл Активный пользователь

    С нами с:
    5 май 2010
    Сообщения:
    5
    Симпатии:
    0
    в своем первом посте напутала - конечно, имена были _post[send1] и _post[send2]. Не работало! Помогла замена на гет...странно, конечно. В любом случае, спасибо Вам, Padaboo, за код и поддержку!
     
  20. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    для тех кому важна работа под FF выложу на jquery
    regions.php
    PHP:
    1. <?php
    2. if(isset($_POST['city'])){
    3. $city=$_POST['city'];
    4. setcookie('region',$city);
    5. header("Location:index.php");
    6. }
    7.  
    8. ?>
    9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    10. <html xmlns="http://www.w3.org/1999/xhtml">
    11. <head>
    12. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    13. <script language="JavaScript" src="jquery-1.4.2.js"></script>
    14. <script language="JavaScript">
    15. function GetCountry(){
    16. $("#regionselect").html('');
    17. $("#cityselect").html('');
    18. $("#selectbutton").hide();
    19. var country=$("#select1").val();
    20. var url = "select.php?country="+country;
    21.     $.ajax({
    22.         url: url,
    23.         type: "GET",       
    24.         success: function(e){
    25.             $("#regionselect").html(e);
    26.         }
    27.     });
    28. }
    29.  
    30. function GetRegion(){
    31. $("#selectbutton").hide();
    32. $("#cityselect").html('');
    33. var region=$("#selectedregion").val();
    34. var url = "select.php?region="+region;
    35.     $.ajax({
    36.         url: url,
    37.         type: "GET",       
    38.         success: function(e){
    39.             $("#cityselect").html(e);
    40.         }
    41.     });
    42. }
    43.  
    44. function SelectCity(){
    45. $("#selectbutton").show();
    46. }
    47. </script>
    48. </head>
    49. <body>
    50. <div style="padding:20px;background-color:#F5F5F5;border:1px solid #FF8C00;position:absolute;top:20%;left:20%">
    51. <center>
    52. <form method="POST" action="regions.php">
    53. <table style="border:1px solid black;">
    54. <tr>
    55.     <td style="width:160px">
    56.         Выберите страну
    57.     </td>
    58.     <td style="width:160px">
    59.         Выберите регион
    60.     </td>
    61.     <td style="width:160px">
    62.         Выберите город
    63.     </td>
    64.     <td rowspan="2">
    65.         <input type="submit" value="Выбрать" style="display:none" id="selectbutton" />
    66.     </td>
    67. </tr>
    68. <tr>
    69.     <td>
    70.         <select id="select1" multiple onChange="GetCountry()">
    71.             <option value="3159">Россия</option>
    72.             <option value="4">Австралия</option>
    73.             <option value="63">Австрия</option>
    74.             <option value="81">Азербайджан</option>
    75.             <option value="173">Ангуилья</option>
    76.             <option value="177">Аргентина</option>
    77.             <option value="245">Армения</option>
    78.             <option value="7716093">Арулько</option>
    79.             <option value="248">Беларусь</option>
    80.             <option value="401">Белиз</option>
    81.             <option value="404">Бельгия</option>
    82.             <option value="425">Бермуды</option>
    83.             <option value="428">Болгария</option>
    84.             <option value="467">Бразилия</option>
    85.             <option value="616">Великобритания</option>
    86.             <option value="924">Венгрия</option>
    87.             <option value="971">Вьетнам</option>
    88.             <option value="994">Гаити</option>
    89.             <option value="1007">Гваделупа</option>
    90.             <option value="1012">Германия</option>
    91.             <option value="1206">Голландия</option>
    92.             <option value="2567393">Гондурас</option>
    93.             <option value="277557">Гонконг</option>
    94.             <option value="1258">Греция</option>
    95.             <option value="1280">Грузия</option>
    96.             <option value="1366">Дания</option>
    97.             <option value="2577958">Доминиканская республика</option>
    98.             <option value="1380">Египет</option>
    99.             <option value="1393">Израиль</option>
    100.             <option value="1451">Индия</option>
    101.             <option value="277559">Индонезия</option>
    102.             <option value="277561">Иордания</option>
    103.             <option value="3410238">Ирак</option>
    104.             <option value="1663">Иран</option>
    105.             <option value="1696">Ирландия</option>
    106.             <option value="1707">Испания</option>
    107.             <option value="1786">Италия</option>
    108.             <option value="1894">Казахстан</option>
    109.             <option value="2163">Камерун</option>
    110.             <option value="2172">Канада</option>
    111.             <option value="582029">Карибы</option>
    112.             <option value="2297">Кипр</option>
    113.             <option value="2303">Киргызстан</option>
    114.             <option value="2374">Китай</option>
    115.             <option value="582040">Корея</option>
    116.             <option value="2430">Коста-Рика</option>
    117.             <option value="582077">Куба</option>
    118.             <option value="2443">Кувейт</option>
    119.             <option value="2448">Латвия</option>
    120.             <option value="2505884">Ливан</option>
    121.             <option value="582060">Ливан</option>
    122.             <option value="2509">Ливия</option>
    123.             <option value="2514">Литва</option>
    124.             <option value="2614">Люксембург</option>
    125.             <option value="582041">Македония</option>
    126.             <option value="277563">Малайзия</option>
    127.             <option value="582043">Мальта</option>
    128.             <option value="2617">Мексика</option>
    129.             <option value="582082">Мозамбик</option>
    130.             <option value="2788">Молдова</option>
    131.             <option value="2833">Монако</option>
    132.             <option value="2687701">Монголия</option>
    133.             <option value="582065">Морокко</option>
    134.             <option value="277551">Нидерланды</option>
    135.             <option value="2837">Новая Зеландия</option>
    136.             <option value="2880">Норвегия</option>
    137.             <option value="582051">О.А.Э.</option>
    138.             <option value="582105">Остров Мэн</option>
    139.             <option value="582044">Пакистан</option>
    140.             <option value="582046">Перу</option>
    141.             <option value="2897">Польша</option>
    142.             <option value="3141">Португалия</option>
    143.             <option value="3156">Реюньон</option>
    144.             <option value="277555">Румыния</option>
    145.             <option value="5681">США</option>
    146.             <option value="5647">Сальвадор</option>
    147.             <option value="277565">Сингапур</option>
    148.             <option value="582067">Сирия</option>
    149.             <option value="5666">Словакия</option>
    150.             <option value="5673">Словения</option>
    151.             <option value="5678">Суринам</option>
    152.             <option value="9575">Таджикистан</option>
    153.             <option value="277567">Тайвань</option>
    154.             <option value="582050">Тайланд</option>
    155.             <option value="582090">Тунис</option>
    156.             <option value="9638">Туркменистан</option>
    157.             <option value="277569">Туркмения</option>
    158.             <option value="9701">Туркс и Кейкос</option>
    159.             <option value="9705">Турция</option>
    160.             <option value="9782">Уганда</option>
    161.             <option value="9787">Узбекистан</option>
    162.             <option value="9908">Украина</option>
    163.             <option value="10648">Финляндия</option>
    164.             <option value="10668">Франция</option>
    165.             <option value="277553">Хорватия</option>
    166.             <option value="10874">Чехия</option>
    167.             <option value="582031">Чили</option>
    168.             <option value="10904">Швейцария</option>
    169.             <option value="10933">Швеция</option>
    170.             <option value="582064">Эквадор</option>
    171.             <option value="10968">Эстония</option>
    172.             <option value="3661568">ЮАР</option>
    173.             <option value="11002">Югославия</option>
    174.             <option value="11014">Южная Корея</option>
    175.             <option value="582106">Ямайка</option>
    176.             <option value="11060">Япония</option>
    177.         </select>
    178.     </td>
    179. <td>
    180.     <center>
    181.         <div id="regionselect"></div>
    182.     </center>
    183. </td>
    184. <td>
    185.     <center>
    186.         <div id="cityselect"></div>
    187.     </center>
    188. </td>
    189. </tr>
    190. </table>
    191. </form>
    192. </center>
    193. </div>
    194. </body>
    195. </html>
    select.php
    PHP:
    1. <?php
    2. $link = mysql_connect("localhost","root","")
    3.          or die("Could not connect: " . mysql_error());
    4. $db="reg";
    5. mysql_select_db($db)  or  die("$db:  ".mysql_error());
    6.  
    7. if(isset($_GET['country'])){
    8.     $country=intval($_GET['country']);
    9.     $query="SELECT * FROM `region` WHERE `country_id`='$country'";
    10.     $result=mysql_query($query,$link);
    11.    
    12.     echo '<select onChange="GetRegion()" multiple id="selectedregion">';
    13.     while($row=mysql_fetch_array($result)){
    14.         echo '<option value="'.$row['region_id'].'">'.$row['name'].'</option>';
    15.     }
    16.     echo '</select>';
    17. }
    18.  
    19. if(isset($_GET['region'])){
    20.     $region=intval($_GET['region']);
    21.  
    22.     $query="SELECT * FROM `city` WHERE `region_id`='$region'";
    23.     $result=mysql_query($query,$link);
    24.    
    25.     echo '<select multiple id="select3" onChange="SelectCity()" name="city">';
    26.     while($row=mysql_fetch_array($result)){
    27.         echo '<option value="'.$row['name'].'">'.$row['name'].'</option>';
    28.     }
    29.     echo '</select>';
    30. }
    31. ?>
    дамп базы reg
    http://narod.ru/disk/12236000/rocid.sql.zip
     
  21. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    Padaboo
    ужас. если $_GET['country'] и $_GET['region'] числа, то почему они эскейпятся, а не приводятся к инту? Кстати, mysql_escape_string уже depricated.

    И ещё, почему бы не отдать всё json'ом и на клиенте уже построить селект?
     
  22. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    Luge
    поправил с приведением к инту, а что вместо mysql_escape_string, mysql_real_escape_string ?
    насчет json в голову не приходило, ни разу не пользовался, рисовать селект на клиенте это чтобы меньше нагружать сервер?
     
  23. Luge

    Luge Старожил

    С нами с:
    2 фев 2007
    Сообщения:
    4.680
    Симпатии:
    1
    Адрес:
    Минск
    да, хотя, можно уже и mysqli попробовать.
    не, чтобы меньше засорять код
     
  24. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Печально видеть картину, когда при нажатии на кнопку тебе с помощью AJAX подгружается куева туча HTML кода с селектами, радиобоксами и прочей детской радостью.
    Я делал хомячок студии, там я решил сделать шаблонизатор на JavaScript.
    Почитав, понял - алгоритмы уже существуют, но как всегда начал изобретать велосипед, чтобы лучше всё понять и прочувствовать.
    Фронт состоял ис простейших div-слоёв с идентификаторами и плейсхолдерами (исключительно для красоты).
    По event-y jQuery ($(document).redy()) я запрашивал соответствующие блоки, которые приходили в формате JSON.
    После мы их парсили с использованием другой мета-информации и подставляли.
    Шаблонизатор был написал тоже с помощью jQuery.

    Сейчас, к июлю, нашу студию хочу проапдейтить.
    Использование объектной нотации и XML на базе ZF.

    P.S.
    Мой мост чет напомнил мне: Ло! Джей Ло!
     
  25. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    Apple
    удобная штука наверное если все на ajax сделано)