Вопрос: у меня есть раскрывающийся список страны и раскрывающийся список регионов. Выпадающий список регионов должен быть заполнен значениями, основанными на выбранной стране, с использованием jQuery. Я googled и попытался решить эту проблему, но я потерпел неудачу, я не мог этого сделать. Какие-нибудь простые шаги, которые помогут мне достичь этого?
Вот мой фрагмент:
В основном загрузка первой страницы заполняет списки обращений из db, а также сохраняет список в сеансах, поэтому список может повторно использоваться на уровне приложения, пока активен сеанс.
Идентификатор страны по умолчанию и regionID помещаются в сеанс с именем $ _SESSION ['regionID'] и $ _SESSION ['countryID']
if(!isset($_SESSION['countryList'])) { $_SESSION['countryList'] = array(); } if(!isset($_SESSION['regionList'])) { $_SESSION['regionList'] = array(); } . . . <form action="index.php" method="GET"> <label for="lbl_country" id="countrylabel">Country</label> <select name="country" id="countrylist" onchange="getRegions(<?php $_SESSION['regionID']; ?>)"> <?php //fetch country list from database and store it in session if(isset($_SESSION['countryList']) && !empty($_SESSION['countryList'])) { foreach ($_SESSION['countryList'] as $val) { echo '<option value="'.$val['countryID'].'"'; if($_SESSION['countryID'] == $val['countryID']) { echo 'selected'; } echo ">".$val['countryName']."</option>'"; } } else //means the session is not set yet-or-session is empty. Either case, we have to fetch { $query = "SELECT countryID, countryName FROM Country ORDER BY countryID ASC"; $results = mysql_query($query); while ($row = mysql_fetch_assoc($results)) { echo '<option value="'.$row['countryID'].'"'; if($_SESSION['countryID'] == $row['countryID']) { echo 'selected'; } echo ">".$row['countryName']."</option>'"; $_SESSION['countryList'][] = $row; } } ?> </select> <label for="lbl_region" id="regionlabel">Region</label> <select name="region" id="regionlist"> <?php if(isset($_SESSION['regionList']) && !empty($_SESSION['regionList'])) { foreach ($_SESSION['regionList'] as $val) { echo '<option value="'.$val['regionID'].'"'; if($_SESSION['regionID'] == $val['regionID']) { echo 'selected'; } echo ">".$val['regionName']."</option>'"; } } else { $query = "SELECT regionID, countryID, regionName FROM Region WHERE countryID =".$_SESSION['countryID']." ORDER BY regionID ASC"; $results = mysql_query($query); while ($row = mysql_fetch_assoc($results)) { echo '<option value="'.$row['regionID'].'"'; if($_SESSION['regionID'] == $row['regionID']) { echo 'selected'; } echo ">".$row['regionName']."</option>'"; //everytime you go to a loop, make sure to put the result in the session $_SESSION['regionList'][] = $row; } } ?> </select> </form> Давайте сделаем простой пример, я использую это, и он отлично работает.
Это выпадающее меню страны:
<?php $countrylist=mysql_query("SELECT * FROM country ORDER BY name ASC"); echo "<select name='country' id='country' onchange=\"reload(this.form)\" title='Country e:g; United Kingdom,Pakistan'><option value='0'>Select Country</option>"; while($clist=mysql_fetch_array($countrylist)) { echo "<option value='$clist[Name]'>$clist[Name]</option>"."<br/>"; } echo "</select>"; ?>в<?php $countrylist=mysql_query("SELECT * FROM country ORDER BY name ASC"); echo "<select name='country' id='country' onchange=\"reload(this.form)\" title='Country e:g; United Kingdom,Pakistan'><option value='0'>Select Country</option>"; while($clist=mysql_fetch_array($countrylist)) { echo "<option value='$clist[Name]'>$clist[Name]</option>"."<br/>"; } echo "</select>"; ?>
Это выпадающее меню региона:
<select name="region" id="region" ></select>
Теперь сделайте отдельный файл с именем crlist.js и включите его на странице с кодом выше:
<script type="text/javascript" src="crlist.js"> </script>
код для crlist.js:
var request = false; /*@cc_on @*/ /*@if (@_jscript_version >= 5) try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { request = false; } } @end @*/ function fillSelect(country,path) { var url = path+"crlist.php?country=" + country; request.open("GET", url, true); request.onreadystatechange = go; request.send(null); } function go() { if (request.readyState == 4) { //if (request.status == 200) { var response = request.responseText; var list=document.getElementById("region"); for (i = list.length - 1; i>=0; i--) { list.remove(i); } var records=response.split('|'); for (i=1; i<records.length; i++) { //alert("rcord="+records[i]); var record=records[i].split('*'); var region=record[0]; //alert("region="+region); var regionid=record[1]; //alert("regionid="+regionid); var x=document.createElement('option'); //var y=document.createTextNode(region); x.text=region; //x.value=region; //alert(x.text); //x.appendChild(y); //list.appendChild(x); list.options.add(x); } //} } } function initCs(path) { if (!request && typeof XMLHttpRequest != 'undefined') { request = new XMLHttpRequest(); } var country=document.getElementById('country'); country.onchange=function() { if(this.value!="Select") { var list=document.getElementById("region"); for (i = list.length - 1; i>=0; i--) { list.remove(i); } //while (list.childNodes[0]) { //list.removeChild(list.childNodes[0]); //} } fillSelect(this.value,path); //alert(this.value); } //fillSelect(country.value); }
Теперь сделайте отдельный файл с именем crlist.php.
Код для crlist.php:
<?php require_once 'yourconfigfile.php'; $cname = $_GET['country']; $query="select ID,Name from city where CountryCode=(select code from country where name='$cname') Order By Name ASC"; $res = mysql_query($query) or die(mysql_error()); while($region = mysql_fetch_array($res)){ echo "<option value='".$region['Name']."'>".$region['Name']."</option>"; } ?>
Теперь добавьте следующий сценарий на странице с раскрывающимися списками:
<script type="text/javascript" src="crlist.js"> </script> <script> $(document).ready(function() { initCs(""); }); </script>
Это мой собственный скрипт, и я предположил, что вы создали таблицы стран и регионов. Но вам нужно настроить запросы и код выше в соответствии с вашей структурой db.
Надеюсь это поможет.