2010-04-21 1 views
1

У меня такие проблемы. используя html и php.PHP drop down, каждый из которых зависит от

Могу ли я знать, как это сделать. У меня есть 2 drop down, например A и B. Сброс B зависит от выпадающего A. Пример: A имеют эти параметры, которые будут вызываться из dbase (без проблем с этим, tq) (Jack, Carol) и B wil имеют опции, зависящие от A: если выбраны Jack (T1, T2, T3), если выбраны карол (T1, T2, T3, T4, T5).

Вот пример интерфейса.

alt text http://i41.tinypic.com/2vk1fgk.png

Может кто-нибудь помочь мне с этим?

спасибо.

ответ

1

U Необходимо работать с Ajax В этом случае. Без обновления страницы. Выбрав любой из столбцов A, вы получите соответствующее значение столбца B. Для примера

<form method="post" name="form1"> 
<table border="0" cellpadding="0" cellspacing="0" width="60%"><tbody> 
    <tr> 
    <td width="150">Country</td> 
    <td width="150"><select style="background-color: #ffffa0" name="country" onchange="getState(this.value)"><option>Select Country</option><option value="1">USA</option><option value="2">Canada</option>  </select></td> 
    </tr> 
<tr> 
    <td>State</td> 
    <td> 
    <p id="statediv"> 
    <select style="background-color: #ffffa0" name="state"><option>Select Country First</option>  </select></td> 
</tr> 
<tr> 
    <td>City</td> 
    <td> 
    <p id="citydiv"> 
    <select style="background-color: #ffffa0" name="city"><option>Select State First</option>  </select></td> 
</tr> 
</tbody></table> 
</form> 

Как вы можете видеть выше, в случае onChage страны выпадающий GetState() функция JavaScript вызывается которые изменяют параметры значений, государство выпадающие, давайте посмотрим на коде GetState().

function getState(countryId) 
{ 
    var strURL="findState.php?country="+countryId; 
    var req = getXMLHTTP(); 
    if (req) 
    { 
    req.onreadystatechange = function() 
    { 
     if (req.readyState == 4) 
     { 
    // only if "OK" 
    if (req.status == 200) 
     { 
     document.getElementById('statediv').innerHTML=req.responseText; 
    } else { 
     alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
    } 
     } 
     } 
    req.open("GET", strURL, true); 
    req.send(null); 
    } 
} 

Код РНР файл findState.php, которые заселить параметры в раскрывающемся состоянии, который извлекается из Ajax, приводятся ниже

<? $country=intval($_GET['country']); 
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required 
if (!$link) { 
    die('Could not connect: ' . mysql_error()); 
} 
mysql_select_db('db_ajax'); 
$query="SELECT id,statename FROM state WHERE countryid='$country'"; 
$result=mysql_query($query); 

?> 
<select name="state" onchange="getCity(<?=$country?>,this.value)"> 
<option>Select State</option> 
    <? while($row=mysql_fetch_array($result)) { ?> 
    <option value=<?=$row['id']?>><?=$row['statename']?></option> 
    <? } ?> 
</select> 

В приведенном выше раскрытом состоянии, getCity() функция вызывается в onChage случае с CountryId и параметром stateId, теперь давайте посмотрим на код функции getCity()

function getCity(countryId,stateId) 
{ 
    var strURL="findCity.php?country="+countryId+"&state="+stateId; 
    var req = getXMLHTTP(); 
    if (req) 
    { 
    req.onreadystatechange = function() 
    { 
     if (req.readyState == 4) // only if "OK" 
     { 
     if (req.status == 200) 
     { 
      document.getElementById('citydiv').innerHTML=req.responseText; 
     } else { 
      alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
     } 
     } 
    } 
    req.open("GET", strURL, true); 
    req.send(null); 
    } 
} 

в приведенной выше функции Ajax, findcity.php является кал и этот файл PHP заполняет раскрывающееся меню города в соответствии с предоставленными параметрами страны и государства из метода get. Теперь давайте посмотрим на код findcity.php,

<?php $countryId=intval($_GET['country']); 
$stateId=intval($_GET['state']); 
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required 
if (!$link) { 
    die('Could not connect: ' . mysql_error()); 
} 
mysql_select_db('db_ajax'); 
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'"; 
$result=mysql_query($query); 

?> 
<select name="city"> 
<option>Select City</option> 
    <?php while($row=mysql_fetch_array($result)) { ?> 
<option value><?=$row['city']?></option> 
<?php } ?> 
</select> 

И то все будут заполнены тройная выпадающий список города, страны и государства с использованием Ajax и PHP.

+0

Я рекомендую Ajax, чтобы избежать обновлений страницы .... –

+0

я рекомендую JQuery, чтобы избежать все, что javascript код – Galen

+0

Thanx все, но я думаю, что я буду смотреть на jquery first..ajax слишком чужой для меня ... больше предложений ?? – user147685

0

Ajax - это «крутая» вещь прямо сейчас, так что все собираются сказать, что используют ajax. Я собираюсь сказать, что вам не нужен ajax. Альтернативой было бы отключить вторую форму. Когда первый выбор отправляется/изменяется, страница перезагружается, добавляя что-то к querystring, например. ? a = jack, а второй выбор заполнен правильными значениями.

Теперь все страницы ссылающиеся на? A = jack автоматически заполнят второй выбор, когда с помощью ajax вам придется писать еще больше кода javascript.

Я не говорю, что не использую ajax, им просто дается другая, скорее всего, более простая альтернатива.

Используйте только ajax, когда он действительно помогает пользователю.

+0

@Galen: Вам обязательно нужно нажать кнопку «Отправить» каждый раз, когда вы хотите изменить выбор в Drop Down A для заполнения Drop Down B. Я бы не стал рассматривать этот «стандартный» дизайн веб-форм. – ashurexm

+0

Нет, вы бы этого не сделали. Вы можете поместить функцию в событие onchange первого выбора, который загружает необходимую страницу. Даже если вам нужно нажать кнопку, это было бы прекрасно использовать. – Galen

+0

@Galen Как сказал: «Ajax - это« крутая »вещь прямо сейчас, так что все собираются сказать« использовать ajax ». Я думаю, что JQuery - это то, что ему нужно пройти через него до начала использования, его синтаксис, его использование, все. .. –

0

Вам понадобится Ajax, связанным с OnClick из отброшенных вниз, который устанавливается для заполнения внутреннего HTML из выпадающего B

+0

вам НЕ НУЖНО ajax – Galen

+0

Извините за поздний ответ. Я не очень хорошо знаком с AjaX .. Есть ли другой способ сделать рядом с ajax ?? – user147685

0

Один из способов сделать это, если вы абсолютно не хотите использовать JQuery, ни JavaScript:

<form action="?step=2" method="post"> 
<select name="name"> 
    <option if($_POST['name'] == 'Jack'){echo ' selected="selected" ';}>Jack</option> 
    <optionif($_POST['name'] == 'Carol'){echo ' selected="selected" ';}>Carol</option> 
</select> 

<?php if($_GET['step'] == 2){?> 
<select name="b"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<?php if($_POST['name'] == 'Carol'){?> 
<option>4</option> 
<option>5</option> 
<?php } ?> 
</select> 
</form> 
<?php } ?> 

<input type="submit" name="next" value="Next" /> 

Вам придется сломать форму/страницу в этапы. И вся форма должна быть повторно заполнена, поскольку страницы перезагружаются.

Надеется, что это может оказаться полезным для вас

+0

Кроме того, я действительно рекомендую изучить немного javascript для таких задач. И, пожалуйста, в следующий раз вы могли бы разместить хотя бы html. Я думаю, вы получите больше ответов. – John

Смежные вопросы