Форум PHP

Доброго времени суток уважаемые форумчане.

Проблема у меян в следующем:
В бд есть информация, которую нужно загрузить в <select>, но подгружать нужно только после того, как сделали выбор в предыдущем selecte

например:
Есть список товаров(телефоны, компьютеры, комплектующие), выбрали например телефоны и в другом selecte должны подгрузится option'ы из бд с помощью ajax.

заранее спасибо!

Люди подскажите как? интересная тема. Хотя бы ссылочку на пример

Здесь есть много примеров использования
http://dklab.ru

про select нет примеров =\

Можно так:

<iframe onLoad="window.document.getElementById('answ').innerHTML= frmansw.document.body.innerHTML;"  frameborder='0' width='0' height='0' name="frmansw" id="frmansw"></iframe><div id='answ'></div> <? $a = array(1=>array(1=>'one1',2=>'one2',3=>'one3'),2=>array(1=>'two1',2=>'two2',3=>'two3')); if (isset($_POST['sel'])) {       print '<select name="nsel">';       foreach ($a[$_POST['sel']] as $key => $value) {           print '<option value="'.$key.'">'.$value.'</option>';       }     print '</select>'; } else {     print "<form action=\"main.php\" method=post name=\"frm\" id=\"frm\" onsubmit=\"this.setAttribute('target','frmansw');\">     <select name=\"sel\" onchange=\"frm.submit()\">     <option value=\"0\">selected</option>     <option value=\"1\">as1</option>     <option value=\"2\">as2</option>     </select></form>"; } ?>

Вот такой вот у меня интересный проект крутится на Веб отчётах (см прикриплённый файл)
Вот там куча селектов которые подгружают содержимое в зависимости от других

Файл ответа

<?php session_start(); require_once "config.php"; require_once "php.php"; $JsHttpRequest =& new Subsys_JsHttpRequest_Php("windows-1251"); require_once "../lib/lib.php"; ob_start(); $id = $_REQUEST['q']; $c=connect_bitl(); if(isset($id)): $arr=explode(';',$id); if(strlen($arr[0])>0){ $causes2_id_add=" and c.causes2id=".$arr[0];}else{$causes2_id_add='';} if(strlen($arr[1])>0){ $realy_id_add=" and c.realy=".$arr[1];}else{$realy_id_add='';} $sql="select id,name    from tech.causes c  where 1=1    $realy_id_add   $causes2_id_add   order by name"; $s = OCIParse($c,$sql);  OCIExecute($s,OCI_DEFAULT);  //echo $sql; ?>                     <select name="causes_id" style="width:280px;">   <?   while ($row = oci_fetch_array($s, OCI_RETURN_NULLS)) : if($service_dest_id==$row['ID']) { ?>   <option value="<?=$row['ID'];?>" selected="selected">   <?=$row['NAME'];?>   </option>   <? }else{?>   <option value="<?=$row['ID'];?>">   <?=$row['NAME'];?>   </option>   <? } endwhile;?> </select> <? oci_free_statement($s); OCILogoff($c);  $contents = ob_get_contents(); $_RESULT = array("m"=>$contents);  if (strpos($q, 'error') !== false) {   callUndefinedFunction(); } ob_end_clean(); endif;//if(!empty($id)) ?>

Файл вызова

<script language="JavaScript"   src="xml/js.js"></script> <script> function doLoad(id,from,to) { document.getElementById(to).innerHTML='загрузка...'; var query =id;// document.getElementById('query').value; var req = new Subsys_JsHttpRequest_Js(); req.onreadystatechange = function() { if (req.readyState == 4) { if (req.responseJS) { document.getElementById(to).innerHTML = req.responseJS.m; }}} req.caching = false; req.open('POST',from, true); req.send({ q: query, test:303 }); } </script> <script> function damages(){ if(document.form1.realy.checked){ if(document.form1.realy_id[0].checked) realy_id=document.form1.realy_id[0].value; if(document.form1.realy_id[1].checked) realy_id=document.form1.realy_id[1].value; }else{realy_id='';} if(document.form1.causes2.checked){ causes2_id=document.form1.causes2_id.value; }else{causes2_id='';} if(document.form1.causes.checked){ causes_id=document.form1.causes_id.value; }else{causes_id='';} beg_d=document.form1.beg_d.value+ '.'+document.form1.beg_m.value+ '.'+document.form1.beg_y.value; end_d=document.form1.end_d.value+ '.'+document.form1.end_m.value+ '.'+document.form1.end_y.value; /*alert(region_id+';'+ report_date_id+';'+ beg_d+';'+ end_d+';'+);*/ doLoad(realy_id+';'+ causes2_id+';'+causes_id+';'+ beg_d+';'+end_d ,'xml/damages.php','damages'); } function causes_id_load(){ if(document.form1.causes2.checked){ causes2_id=document.form1.causes2_id.value; }else{causes2_id='';} if(document.form1.realy.checked){ if(document.form1.realy_id[0].checked) realy_id=document.form1.realy_id[0].value; if(document.form1.realy_id[1].checked) realy_id=document.form1.realy_id[1].value; }else{realy_id='';} if(document.form1.causes.checked) doLoad(causes2_id+';'+realy_id,'xml/causes2id.php','result'); } </script> <form id="form1" name="form1" method="post" action="">       <table border="0" align="left" cellpadding="5" cellspacing="1">         <tr>           <td bgcolor="#E1DFC8">Дата</td>           <td bgcolor="#E1DFC8"><table width="100%" border="0" cellspacing="0" cellpadding="0">               <tr>                 <td><div id="dat_result">                     <? $sql="  select to_char(dbr.from_date, 'yyyy-mm-dd hh24:mi:ss') fr_d,        to_char(dbr.to_date, 'yyyy-mm-dd hh24:mi:ss') to_d   from db.report_date dbr  where dbr.is_closed = 'F'"; $s = OCIParse($c,$sql);  OCIExecute($s,OCI_DEFAULT);  $row = oci_fetch_array($s, OCI_RETURN_NULLS); ?>                   С                   <input name="beg_d" type="text" id="beg_d" size="2" value="<?=date("d",strtotime($row['FR_D']))?>">                   .                   <input name="beg_m" type="text" id="beg_m" size="2" value="<?=date("m",strtotime($row['FR_D']))?>">                   .                   <input name="beg_y" type="text" id="beg_y" size="2" value="<?=date("y",strtotime($row['FR_D']))?>">                   По                   <input name="end_d" type="text" id="end_d" size="2" value="<?=date("d",strtotime($row['TO_D']))?>">                   .                   <input name="end_m" type="text" id="end_m" size="2" value="<?=date("m",strtotime($row['TO_D']))?>">                   .                   <input name="end_y" type="text" id="end_y" size="2" value="<?=date("y",strtotime($row['TO_D']))?>">                 </div></td>               </tr>           </table></td>         </tr>             <tr>               <td rowspan="3" bgcolor="#E1DFC8">Тип повреждения</td>               <td bgcolor="#E1DFC8">                 <table width="100%" border="0" cellspacing="0" cellpadding="0">                   <tr>                     <td><input type="checkbox" name="realy" value="checkbox" onclick="if(this.checked){document.form1.realy_id[0].disabled=''; document.form1.realy_id[1].disabled='' }else{ document.form1.realy_id[0].disabled='disabled'; document.form1.realy_id[1].disabled='disabled';} causes_id_load();"  align="left"/></td>                     <td width="100%">                                               Повреждение                            <input type="radio" name="realy_id" value="1"  checked="checked" disabled="disabled" onclick="causes_id_load();"/>                       Да                                            <input type="radio" name="realy_id" value="0" disabled="disabled" onclick="causes_id_load();"/>                         Нет                        </td>                   </tr>                 </table>              </td>             </tr>         <tr>           <td bgcolor="#E1DFC8"><table width="100%" border="0" cellspacing="0" cellpadding="0">             <tr>               <td><input name="causes2" type="checkbox"  onclick="if(this.checked) {document.form1.causes2_id.disabled='';}else {document.form1.causes2_id.disabled='disabled';} causes_id_load();" value="checkbox"  align="left" /></td>               <td><? $c=connect_bitl();   $sql="select id, name   from tech.causes2"; $s = OCIParse($c,$sql);  OCIExecute($s,OCI_DEFAULT);  ?>                   <select name="causes2_id" style="width:280px;" onchange="causes_id_load();" disabled="disabled"> <?   while ($row = oci_fetch_array($s, OCI_RETURN_NULLS)) : if($service_dest_id==$row['ID']) { ?>                     <option value="<?=$row['ID'];?>" selected="selected">                     <?=$row['NAME'];?>                     </option>                     <? }else{?>                     <option value="<?=$row['ID'];?>">                     <?=$row['NAME'];?>                     </option>                     <? } endwhile;?>                 </select></td>             </tr>           </table></td>         </tr>         <tr>           <td bgcolor="#E1DFC8"><table width="100%" border="0" cellspacing="0" cellpadding="0">               <tr>                 <td><input type="checkbox" name="causes" value="checkbox" onclick="if(this.checked) {document.form1.causes_id.disabled='';  causes_id_load(); }else {document.form1.causes_id.disabled='disabled';}"  align="left"/></td>                 <td width="100%"><div id="result">                     <? $sql=" select id,name    from tech.causes c  where c.realy=1    and c.causes2id=1  order by name "; $s = OCIParse($c,$sql);  OCIExecute($s,OCI_DEFAULT);  ?>                     <select name="causes_id" style="width:280px;" disabled="disabled">                       <?   while ($row = oci_fetch_array($s, OCI_RETURN_NULLS)) : if($service_dest_id==$row['ID']) { ?>                       <option value="<?=$row['ID'];?>" selected="selected">                       <?=$row['NAME'];?>                       </option>                       <? }else{?>                       <option value="<?=$row['ID'];?>">                       <?=$row['NAME'];?>                       </option>                       <? } endwhile;?>                     </select>                 </div></td>               </tr>           </table></td>         </tr>                  <tr>           <td colspan="2" align="center" bgcolor="#E1DFC8"><input name="table" type="button" value="Результат"  onClick="damages();" /></td>         </tr>   </table>       <div id="damages"><img src="files/loading.gif" width="0" height="0"></div> </form>

спасибо большое, разобрался сам.
юзал библиотеку dklab и подгружал следующий select если первый onchange =]

Я функцию DoLoad переделал. Там появились параметры откуда и куда загружать.
Очень удобно ))

Кому интересно, то вот:
jquery.js - библиотека jquery (качать отсюда jquery.com)

<script src="jquery.js"></script>  <script>  function sendData(obj) {    var post = {p: obj.value, id: obj.id};  $.post('backend.php', post, function(data){$('#debug').html(data);})  }  var sel = $("#id"); // добавляем к нему <option value="1">Пример опции</option> $("<option></option>")  // создаем требуемый элемент   .attr("value", 1)     // устанавливаем значение одного из его атрибутов   .html("Пример опции") // записываем в него текст   .appendTo(sel);       // прикрепляем к уже существующему элементу }  </script>  Select:<select id="id" onchange="sendData(this)">        <option value="bygaga">Бугага</option>        <option value="trulala">Тра ля ля</option>  </select>

Абсолютно ничего сложного.
jquery очень "изящная" и легкая в использовании библиотека, всем советую использовать.
В интернете очень много полезной информации и плагинов для даннов библиотеки.

Так же существует дополнение для jquery, называемое interface

interface.eyecon.ro/

Antohins можно подробный рабочий приммер с комментами. С двумя списками проблем нет. как сделать три и более зависимых списков уже сложнее.
Очень хочу разобраться как это все работает. и не только мне это интересно я так полагаю.

http://mitsubishi-megacars.com.ua/admin/calc.php


посотрите сделано так как вы пишите если интересно могу кинуть исходники
реализовано на ajax

ReZiStOr конешно оставь исходники. очень интересно

Вот исходники это скрипт кредитного калькулятора работающего на данных с БД отклонение от подщета на маткаде 0.001

http://tigir.com/javascript_select.htm

mihdan у вас тоже интересный пример, тоже пригодится в практике

technic611

смотри мой пример выше

всем спасибо. разобрался сам.

вот что налобал.

ajax.js

function createHttpRequest() { var httpRequest; var browser = navigator.appName; if (browser == "Microsoft Internet Explorer") { httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } else { httpRequest = new XMLHttpRequest(); } return httpRequest; }  function sendRequest(file, _resultId, getRequestProc) { resultId = _resultId; document.getElementById(resultId).innerHTML = 'Подождите, идет загрузка...'; httpRequest.open('get', file); httpRequest.onreadystatechange = getRequestProc; httpRequest.send(null); }  function sendSearchRequest() {   sendRequest('hello.php?q=' + document.getElementById('make').value, 'result', getRequest); // Очищаем третий список.  //Здесь много вариантов как его можно убрать. //я сделал так // удаляем третий список с содержимым document.getElementById('result2').innerHTML = '';   // добавим новый список var sloy=document.getElementById('result2'); var newInput=document.createElement('select');  sloy.appendChild(newInput); newInput.options[0] = new Option("не выбрана", "str0"); // и сделаем его неактивным  newInput.disabled = true; } function sendSearchRequest_2() { sendRequest('hello2.php?qm=' + document.getElementById('model').value, 'result2', getRequest); } function getRequest() { if (httpRequest.readyState == 4) { document.getElementById(resultId).innerHTML = httpRequest.responseText; } }  var httpRequest = createHttpRequest(); var resultId = '';

форма calc.php

<html> <head> <title>Привет, мир AJAX'a</title> <script language="JavaScript" src="ajax.js" type="text/javascript"></script> </head> <body> <? // Подключаемся к базе  include"config.php"; // Выводим первый список echo"<select id='make' style='FONT-SIZE: 9pt; FONT-FAMILY: Verdana' onchange=\"javascript: sendSearchRequest();\" name=make><option value='' >не выбрана</option>"; $query = "SELECT * FROM spisok_car ORDER BY marka"; $model_car = mysql_query($query); while($mod= mysql_fetch_array($model_car)) { echo"<option value='".$mod['id_spisok_car."'>".$mod['marka']."</option>"; } echo"</select>"; ?> <p id="result">Здесь будет результат запроса выбора из первого списка</p> <p id="result2">Здесь будет результат запроса выбора из второго списка </p>

файл hello.php

<? include"config.php"; if($_GET['q']=="") { echo "<select style='FONT-SIZE: 9pt; FONT-FAMILY: Verdana' name='model' > <option value='0'>не выбрана</option></select>"; }else { $query = "SELECT * FROM model_car WHERE id_spisok_car=".$_GET['q']." ORDER BY model"; $model_car = mysql_query($query); echo "<select id='model' style='FONT-SIZE: 9pt; FONT-FAMILY: Verdana' name='model' onchange=\"javascript: sendSearchRequest_2();\"> <option value='0'>не выбрана";                           while($mod= mysql_fetch_array($model_car)) { echo"<option  value=".$mod['id'].">".$mod['model'].""; } echo "</select>"; } ?>

файл hello2.php

<? include"config.php"; if($_GET['qm']=="") { echo "<select style='FONT-SIZE: 9pt; FONT-FAMILY: Verdana' name='compl' > <option value='0'>не выбрана</option></select>"; }else { $query = "SELECT * FROM cat_complectations WHERE model_id=".$_GET['qm'].""; echo $query; $model_car = mysql_query($query); echo "<select id='compl' style='FONT-SIZE: 9pt; FONT-FAMILY: Verdana' name='compl' > <option value='0'>не выбрана";                  while($mod= mysql_fetch_array($model_car)) { echo"<option  value=".$mod['name'].">".$mod['name'].""; } echo "</select>"; } ?>

Спецы по аяксу жду предложений как это все можно улучшить. Ориентир http://www.carone.ru/calc2.xml?tab=japan&id=103305&type=0#results