Мне нужен некоторый код ajax для выполнения некоторых функций с выпадающим списком.
У меня есть три таблицы ценностей по стране, а затем по штату и городу.
И у меня есть три раскрывающихся списка, чтобы показать эти значения
сначала он должен показать
выберите страну
выбрать состояние
выберите город
в этом выпадающем списке (выбор) соответственно.
когда я выбираю сша из первого выпадающего меню
во втором падении он должен показывать состояния штатов.
и снова, когда я выбираю состояние из раскрывающегося списка состояния
он должен показывать города этого штата в третьем выпадающем списке (городе)
Я хочу сделать это с помощью ajax.
у кого-нибудь есть код для этого.
пожалуйста помогите.
благодаря
1) создать 3 таблицы в db
country table ============== countryId || countryName stateTable ============= stateId || stateName || countryName city table ============= cityId || cityName || stateId 2) теперь создайте 3 веб-сервиса, которые отправляют данные в формате json
3) теперь на странице html создайте три окна выбора и привяжите событие onchange в каждом окне выбора (кроме выбора города), это событие отправит countryId для getStates Webservcie и stateId для веб-службы getCities. и привязать полученные json состояния в поле выбора состояния и городах в поле выбора города
Может быть сделано по-разному …
Затем, как вы планируете получать состояния, связанные с первым меню, и города, связанные со вторым?
Являются ли они в базе данных? Или в массиве js (json?)?
Если они находятся в базе данных, перейдите с помощью ajax-запросов .. else, используйте массив.
Есть так много плагинов и howto's для этого протектора, google немного
edit : кто удалил тег plz-send-me-teh-code ?!
Это очень старый проект, поэтому я сделал это через Javascript, а не jQuery; Надеюсь, все в порядке.
<td>Type</td> <td> <select id="type" onChange="propertyType(this.value)" name="type"> <option value="">All</option> <option value="homes">Homes</option> <option value="plots">Plots</option> <option value="commercial">Commercial</option> </select> </td>
это js свойстваType
function propertyType(str){ if(str=='' || str=='plots'){ document.getElementById("type_h").innerHTML=""; document.getElementById("bed").innerHTML=""; } else if(str=='commercial'){ document.getElementById("bed").innerHTML=""; } else{ document.getElementById("type_h").innerHTML="<img src='<?php echo $serverimageurl?>ajax-loader-small.gif' />"; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("type_h").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax/propertytype.php?s="+str,true); xmlhttp.send(); } }
Это свойство property.php
<?php $s=$_GET["s"]; if($s=="homes"){ ?> <select onchange="ajax_bed(this.value)" name="subtype" id="subtype" > <option value="">Type Of Houses</option> <option value="houses">Houses</option> <option value="flats">Flats</option> <option value="farmhouses">Farm Houses</option> </select> <?php } if($s=="plots") { ?> <?php } if($s=="commercial") { ?> <select name="subtype" id="subtype" > <option value="offices">Offices</option> <option value="shops">Shops</option> <option value="warehouses">Warehouses</option> <option value="factories">Factories</option> <option value="building">Buildings</option> <option value="other">Other</option> </select> <?php } ?>
Это функция ajax для выбора количества комнат
function ajax_bed(str){ document.getElementById("bed").innerHTML="<img src='<?php echo $serverimageurl?>ajax-loader-small.gif' />"; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("bed").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax/bedroomsselection.php?t="+str,true); xmlhttp.send(); }
Это bedroomselection.php
<?php $t=$_GET["t"]; if($t=="houses"||$t=="flats"||$t=="farmhouses") { ?> <select id="bed" name="bed"> <option>None</option> <option>Single Bed</option> <option>Double Bed</option> <option>three Bed</option> <option>Four Bed</option> <option>Five Bed</option> <option>Six Bed</option> <option>Seven Bed</option> <option>Eight Bed</option> <option>Ten Bed</option> <option>More Than Ten Bed</option> </select> <?php } ?>
Надеюсь, теперь у вас есть идея, чтобы самому написать код Cheers