У меня есть два раскрывающихся ящика. Я хочу заполнить второй раскрывающийся список при выборе в первом раскрывающемся списке. Мои значения извлекаются из базы данных. Возможно ли это без использования php или мне нужен промежуточный файл ajax и php для получения значений из первого выпадающего и заполняемого файла значений. Или это возможно без использования php, я имею в виду только использование JQuery. Пожалуйста, дайте мне намек на это.
Предположим, у меня есть 2 страны. Сначала ИНДИЯ, а вторая – США. В первом раскрывающемся списке я выбираю страны, и если выбрано первое раскрывающееся меню, то во втором выпадающем списке заполняются его соответствующие состояния.
если вы кодируете свои данные в формате JSON, вы можете сделать что-то вроде этого:
для HTML:
<select name='country' id='country'> <option value='india'>India</option> <option value='usa'>USA</option> </select> <select name='dates' id='dates'> </select> JQuery:
data = { india: ['2011-03-11','2010-02-01'], usa: ['2006-03-11','2009-02-01'] } $('#country').change(function(){ var dateopts = '' $.each(data[$(this).val()],function(i,v){ dateopts += "<option value='"+v+"'>"+v+"</option>" }) $('#dates').html(dateopts) })
Который при изменении страны будет строить и заполнять опции для второго блока выбора.
См. Рабочий пример здесь: http://jsfiddle.net/xHxcD/
Вышеуказанный метод требует, чтобы все данные отправлялись на клиентскую сторону с запросом начальной страницы. Если у вас много данных, было бы лучше получить данные через AJAX. Было бы проще сделать это, построив объект на PHP с той же структурой данных, что и ваша клиентская сторона, а затем используйте json_encode для преобразования его в строку JSON и повторите его.
Чтение этого на вашей стороне клиента было бы таким же простым, как это:
$.ajax('myJsonData.php?country=india',function(jsonData){ data.india = jsonData })
Вы могли бы сделать это в любом случае. Если вы не хотите использовать ajax, просто загрузите каждый отдельный объект в объект. Затем, когда вы выбираете что-то из select # 1, заполните # 2 с помощью массива данных из вашего объекта.
Если бы я это делал, я бы не сделал этого с ajax, если бы не было TON данных.
Да, вы можете сделать это, не используя php. Для этого вам нужно назначить два списка состояний в массиве Javascript, а база для выбора просто измените параметры в другом поле выбора. Так просто.
Вы можете назначить массив javascript, используя язык сценариев сервера, при загрузке страницы, если вы используете базу данных для хранения состояний.
Но не делайте этого, если у вас мало данных о количестве. В вашем случае у вас есть только 2 страны, чтобы вы могли продолжить.
Давайте сделаем простой пример, я использую это с той же целью, что и вы, и он отлично работает.
Это выпадающее меню страны:
<?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.
Ссылка на мой ответ: раскрывающийся список Cascade с использованием jQuery / PHP
Надеюсь это поможет.