Javascript 如何使用PHP ajax JQUERY创建3个依赖的下拉列表？
我有一个网页，其中包括3个下拉列表，其中包括从MYSQL数据库检索到的数据 我想让这三个下拉列表相互依赖，其中用户从第一个下拉列表中选择，并且根据用户的选择，第二个下拉列表显示与第一个下拉列表相关的数据，第二个和第三个下拉列表之间也会发生同样的事情 我写了一个代码，但什么都没有发生我的错误在哪里，如何修复它 javascript代码： 注意：我从数据库中提取数据作为对象，然后使用json_encode转换为json对象 完成代码：Javascript 如何使用PHP ajax JQUERY创建3个依赖的下拉列表？,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,我有一个网页，其中包括3个下拉列表，其中包括从MYSQL数据库检索到的数据 我想让这三个下拉列表相互依赖，其中用户从第一个下拉列表中选择，并且根据用户的选择，第二个下拉列表显示与第一个下拉列表相关的数据，第二个和第三个下拉列表之间也会发生同样的事情 我写了一个代码，但什么都没有发生我的错误在哪里，如何修复它 javascript代码： 注意：我从数据库中提取数据作为对象，然后使用json_encode转换为json对象 完成代码： 尝试以下纯JS实现- var stateObject={ 三轮
尝试以下纯JS实现- var stateObject={ 三轮车：{ 巴贾吉：[巴贾吉可再生天然气，巴贾吉柴油]， 阿图尔：[皮亚戈，沙克蒂] }, 两轮车：{ 英雄：[辉煌，CBZ]， 本田：[大黄蜂，CBR]， }, 汽车：{ 铃木：[斯威夫特、齐亚兹、巴勒诺、哲尔、布雷扎阿、埃尔蒂加、塞莱里奥、埃科、奥姆尼、阿尔托、克罗斯、伊格尼斯、瓦格纳]， 现代：[i20，i10，Creat，Eon，Xcent，Santro，Tucson，Elatarna]， 大众汽车：[捷达、马球、帕萨塔、马球、途观、阿美欧]， 日产：[泰拉诺、达斯特、迈卡、阳光]， 本田：[城市、维纳、CR-V、雅阁、BR-V、布里奥、亚马逊、爵士乐]， 福特：[生态体育、Endaviour、菲戈、自由泳、Aspire]， } } window.onload=函数{ var stateSel=document.getElementByIdstateSel， countySel=document.getElementByIdcountySel， citySel=document.getElementByIdcitySel； 对于stateObject中的var状态{ stateSel.options[stateSel.options.length]=新选项状态，状态； } stateSel.onchange=函数{ countySel.length=1；//首先删除所有选项栏 citySel.length=1；//首先删除所有选项栏 如果选择此项，则索引<1{ countySel.options[0]。text=选择品牌 citySel.options[0]。文本=选择模式 return；//完成 } countySel.options[0]。text=选择品牌 对于stateObject中的var county[this.value]{ countySel.options[countySel.options.length]=新选项county，county； } 如果countySel.options.length==2{ countySel.selectedIndex=1； countySel.onchange； } } stateSel.onchange；//重新加载页面时重置 countySel.onchange=函数{ citySel.length=1；//首先删除所有选项栏 如果选择此项，则索引<1{ citySel.options[0]。text=Please return；//完成 } citySel.options[0]。text=Please var cities=stateObject[stateSel.value][this.value]； 对于变量i=0；i
<script type="text/javascript">
// make Dropdownlist depend on each other
$(document).ready(function(){
$('#site_name').on('change'function(){
var SITENAME = $(this).val();
if(SITENAME){
$.ajax({
url: 'search_info_location.php',
type:'POST',
data:'site_name='+SITENAME,
dataType: 'json',
success:function(html){
$('#owner_name').html(html);
$('#Company_name').html('<option value="">Select Owner Name</option>');
}
});
}
else{
$('#owner_name').html('<option value="">Select Site Name first</option>');
$('#Company_name').html('<option value="">Select Owner Name first</option>');
}
});
$('#owner_name').on('change',function(){
var OWNERNAME = $(this).val();
if(OWNERNAME){
$.ajax({
type:'POST',
url:'search_info_location.php',
data:'owner_name='+OWNERNAME,
success:function(html){
$('#Company_name').html(html);
}
});
}else{
$('#Company_name').html('<option value="">Select Owner Name first</option>');
}
});
});
<?php
/*
Template Name: search info_location
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCquey2tCZ32jLJJDEEi2D7_RnXXyj9RTI&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 400px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<?php
// code for submit button action
global $wpdb, $site_name;
//variables that handle the retrieved data from mysql database based on the ID of the variable in HTML (select)
if(isset($_POST['query_submit']))
{
if(isset($_POST['site_name']))
{
$site_name=$_POST['site_name'];
}
else { $site_name=""; }
if(isset($_POST['owner_name']))
{
$owner_name=$_POST['owner_name'];
}
else { $owner_name=""; }
if(isset($_POST['Company_name']))
{
$company_name=$_POST['Company_name'];
}
else { $company_name=""; }
if(isset($_POST['Subcontractor_name']))
{
$Subcontractor_name=$_POST['Subcontractor_name'];
}
else { $Subcontractor_name="";}
// var_dump($site_name);
$sql = $wpdb->prepare("select i.siteID
, i.siteNAME
, i.equipmentTYPE
, c.latitude
, c.longitude
, c.height
, o.ownerNAME
, o.ownerCONTACT
, x.companyNAME
, y.subcontractorCOMPANY
, y.subcontractorNAME
, y.subcontractorCONTACT
from site_info i
LEFT
JOIN owner_info o
on i.ownerID = o.ownerID
LEFT
JOIN company_info x
on i.companyID = x.companyID
LEFT
JOIN subcontractor_info y
on i.subcontractorID = y.subcontractorID
LEFT JOIN site_coordinates2 c
on i.siteID=c.siteID
where
i.siteNAME = %s
AND
o.ownerNAME = %s
AND
x.companyNAME = %s
",$site_name,$owner_name,$company_name);
$query_submit =$wpdb->get_results($sql, OBJECT);
echo "<br>";
echo "<br>";
//echo $sql;
// var_dump($_POST['site_name']);
// table that will dsiplay the results based on the user's selection //
echo "<table class='t1' width='30%'> ";
echo "<tr>";
echo "<th>Site Name</th>";
echo "<th>Owner Name</th>";
echo "<th>Company Name</th>";
echo "<th>Subcontractor Name</th>";
echo "<th>Site ID</th>";
echo "<th>Equipment Type</th>";
echo "<th> Lattitude</th>";
echo "<th>Longitude </th>";
echo "<th> Height</th>";
echo "<th> Owner Contact</th>";
echo "<th> Sub Contact</th>";
echo "<th> Sub company Name</th>";
echo "</tr>";
foreach ($query_submit as $obj) {
echo "<tr>";
echo "<td>".$obj->siteNAME."</td>";
echo "<td>".$obj->ownerNAME."</td>";
echo "<td>".$obj->companyNAME."</td>";
echo "<td>".$obj->subcontractorNAME."</td>";
echo "<td>".$obj->siteID."</td>";
echo "<td>".$obj->equipmentTYPE."</td>";
echo "<td>".$obj->latitude."</td>";
echo "<td>".$obj->longitude."</td>";
echo "<td>".$obj->height."</td>";
echo "<td>".$obj->ownerCONTACT."</td>";
echo "<td>".$obj->subcontractorCONTACT."</td>";
echo "<td>".$obj->subcontractorCOMPANY."</td>";
echo "</tr>";
//$arrayOBJ = (array)$obj;
echo json_encode($obj);
//var_dump($arrayOBJ);
}
?>
<script type="text/javascript">
// make Dropdownlist depend on each other
$(document).ready(function(){
$('#site_name').on('change'function(){
var SITENAME = $(this).val();
if(SITENAME){
$.ajax({
url: 'search_info_location.php',
type:'POST',
data:'site_name='+SITENAME,
dataType: 'json',
success:function(html){
$('#owner_name').html(html);
$('#Company_name').html('<option value="">Select Owner Name</option>');
}
});
}
else{
$('#owner_name').html('<option value="">Select Site Name first</option>');
$('#Company_name').html('<option value="">Select Owner Name first</option>');
}
});
$('#owner_name').on('change',function(){
var OWNERNAME = $(this).val();
if(OWNERNAME){
$.ajax({
type:'POST',
url:'search_info_location.php',
data:'owner_name='+OWNERNAME,
success:function(html){
$('#Company_name').html(html);
}
});
}else{
$('#Company_name').html('<option value="">Select Owner Name first</option>');
}
});
});
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: '<b>Site ID :</b> ' + feature.info +'<br></br>'
+ '<b> Site Name :</b>' + feature.site_name +'<br></br>'
+ '<b>Coordinates :</b> '+ feature.position +'<br></br>'
+ '<b>height :</b> ' + feature.height,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
$prependStr ="";
foreach( $wpdb->get_results("select c.siteID, c.latitude, c.longitude, c.height
, i.siteNAME
FROM site_coordinates2 c LEFT
JOIN site_info i
on c.siteID = i.siteID
where i.siteNAME = '".$site_name."'", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$siteid = $row->siteID;
$height = $row->height;
$siteName = $row->siteNAME;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
info:'<?php echo $siteid;?>',
height: '<?php echo $height;?>',
site_name: '<?php echo $siteName;?>',
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
<?php
echo "</table>";
}
?>
<!-- the below part of code work as it should --!>
<!--create dropdown list site names-->
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $site_name)
{
// $site_name = (array)$site_name;
echo "<option value = '".$site_name ->siteNAME."'>". $site_name->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<?php
global $owner_name;
$query_owner_name =$wpdb->get_results ("select DISTINCT ownerNAME from owner_info");
foreach($query_owner_name as $owner_name)
{
// $owner_name = (array)$owner_name;
echo "<option value = '".$owner_name->ownerNAME."'>". $owner_name->ownerNAME."</option>";
}
?>
</select></td>
<!--create dropdown list Company names-->
</select></td>
<td><select id="Company_name" name ="Company_name">
<?php
global $Company_name;
$query_Company_name =$wpdb->get_results ("select DISTINCT companyNAME from company_info");
foreach($query_Company_name as $Company_name)
{
// $Company_name = (array)$Company_name;
echo "<option value = '".$Company_name->companyNAME."'>". $Company_name->companyNAME."</option>";
}
?>
</select></td>
<!--create dropdown list Subcontractor names-->
</select></td>
<td><select id="Subcontractor_name" name ="Subcontractor_name">
<?php
global $Subcontractor_name;
$query_Subcontractor_name =$wpdb->get_results ("select DISTINCT subcontractorNAME from subcontractor_info");
foreach($query_Subcontractor_name as $Subcontractor_name)
{
// $Subcontractor_name = (array)$Subcontractor_name;
echo "<option value = '".$Subcontractor_name->subcontractorNAME."}'>". $Subcontractor_name->subcontractorNAME."</option>";
}
?>
</select></td>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type ="submit" name="query_submit" value ="Search" />
</td>
</tr>
</table>
</form>
</body>
</html>
<?php
get_footer();
?>