填充下拉列表 - PHP Ajax MySQL
Posted
技术标签:
【中文标题】填充下拉列表 - PHP Ajax MySQL【英文标题】：Populating dropdown - PHP Ajax MySQL 【发布时间】：2011-07-17 00:31:43 【问题描述】：我的 html 页面上有 2 个下拉列表：第一个下拉列表包含数据库列名称，第二个下拉列表将根据这些名称填充 即
我有一个包含字段的表：<Student Name, Degree, City>，以下是条目；
1. "A", "BS", "New York"
2. "B", "BS", "Chicago"
3. "C", "MS", "Boston"
4. "D", "MS", "New York"
所以我的第一个下拉列表将包含列名，即“Degree”和“City”。
如果我选择“Degree”，第二个下拉菜单应该填充“BS”和“MS”，如果我选择“City”，第二个下拉菜单应该选择“New York”、“Boston”和“Chicago”。
我该如何进行实施？
[添加我的代码]：
changeSecond(first) 方法与您建议的完全相同
<body>
<form method="POST" action="" name="mainForm">
<table>
<tr>
<td> Filter by: </td>
<td>
<div id="first">
<select onChange="changeSecond(this.value)">
<option value="1">All</option>
<option value="2">Degree</option>
<option value="3">City</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<div id="second">
<select name="val">
<option value=""></option>
</select>
</div>
</td>
</tr>
</table>
</form>
</body>
这是你建议的 second_script.php：
<?
$link = mysql_connect("localhost", "root", "");
if (!$link)
die('Could not connect: ' . mysql_error());
if (mysql_select_db("myDatabase", $link))
$first=mysql_real_escape_string($_REQUEST["first"]);
$query="SELECT ".$first." FROM myTable GROUP BY ".$first;
$data=mysql_query($query);
echo "<select id=\"second\">";
while($row=mysql_fetch_row($data))
echo "<option value=\"".$row[0]."\">".$row[0]."</option>";
echo "</select>";
echo mysql_error();
?>
【问题讨论】：
呃，对不起。尝试使用替代变量名而不是“新”...（在 changeSecond 函数中） 另外，您需要调整脚本以适应您的“全部”案例 @Robot：还是不行。从第一个下拉列表中选择一个值会在浏览器"; while($row=mysql_fetch_row($data)) echo ""; echo ""; ?> 上显示以下内容。我无法理解这里的问题。数据库查询会不会有问题？
看来 php 提前关闭了……有流氓吗？在
从头开始 ^...您的脚本仍然与上面显示的完全一样吗？看起来某处缺少引号，因此它正在回显不应该回显的所有内容，并隐藏了应回显的内容。也许额外的 \ 给第二个\">\";
【参考方案1】：
您要根据其他下拉菜单填充的主文件的代码 在下面的示例中，我在父下拉列表中选择的那个城市的子下拉列表中显示位置
<script type="text/javascript">
function city_locality(val)
// alert (val);
url="<?php echo $this->baseurl ?>/components/com_ezportal/includes/query.php";
data="stid="+val;
$.post(url,data,function(data)
$("#locid").html(data);
);
</script>
<select name="filter_1state" id="filter_1state" onChange="city_locality(this.value)">
<option value="0">-- Select City --</option>
<option value="1">Lahore</option>
<option value="2">Karachi</option>
<option value="3">Islamabad</option>
<option value="4">Quetta</option>
<option value="5">Multan</option>
</select>
文件 query.php 的代码
<?php
$link = mysql_connect('localhost', 'root', '');
mysql_select_db('mydatabase');
if (isset($_POST['stid']))
$stid = $_POST['stid'];
$query= mysql_query("SELECT id,ezcity FROM tbl_locality WHERE stateid = '".$stid."' GROUP BY ezcity");
?>
<option value="0">-- Select Locality --</option>
<?php
while($row = mysql_fetch_array($query))
?>
<option value="<?php echo $row['id']?>"><?php echo $row['ezcity']?> </option>
<?php
?>
【讨论】：
你是一个开始，我将修改你的答案并重新发布它，因为我看到了一些我刚刚删除的东西，它对我有用【参考方案2】：如果您想要一个更动态的解决方案（将适应对后台数据库的更改），您可以在您的页面上执行以下操作：
<script>
function changeSecond(first)
var xmlhttp;
if (window.XMLHttpRequest)
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
else
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
var res=xmlhttp.responseText;
document.getElementById("second").innerHTML=res;
xmlhttp.open("GET","second_script.php?first="+first,true);
xmlhttp.send();
</script>
...
<select onChange="changeSecond(this.value)">
<option value="Degree">Degree</option>
<option value="City">City</option>
</select>
<div id="second"><select><option value=""></option></select></div>
然后是类似以下的脚本：
<?php
//database connection
$first=mysql_real_escape_string($_REQUEST["first"]);
$query="SELECT ".$first." FROM tablename GROUP BY ".$first;
$data=mysql_query($query);
echo "<select>";
while($row=mysql_fetch_row($data))
echo "<option value=\"".$row[0]."\">".$row[0]."</option>";
echo "</select>";
?>
我猜为了真正的灵活性，您还想在另一个类似于上面的脚本中使用 mysql_field_name 动态填充第一个
【讨论】：
嗨，我尝试了你的建议，但仍然遇到同样的问题，即第二个下拉列表根本没有填充。有什么办法可以调试代码吗？ .事实上，我认为onChange 调用不会发生，因为链接second_script.php?first= 不会在从第一个下拉列表中选择值时显示。
不显示是什么意思？如果您（临时）替换 changeSecond 中的代码以弹出警告框怎么办？ （以确认正在调用该函数）...另外，也许可以按原样发布您的代码，以便我们更好地了解什么不起作用
哦，你是从服务器运行这些，还是在本地运行？
本地。替换onChange="javascript: alert('On Load event fired!')" 会弹出一个警报窗口。添加了我的代码。请建议我如何去做【参考方案3】：
您可以预先加载和隐藏所有需要的下拉菜单，并在第一个下拉菜单中触发“更改”事件时显示它们，或者有两个下拉菜单并在同一个“更改”事件上将其清空。
如果您选择第二种方法，您应该缓冲要插入下拉列表的数据，部分或全部
【讨论】：
【参考方案4】：您可以为此目的使用 ajax
eg1.html
<html>
<head><title></title>
</head>
<body>
<form method="POST" action="" name="mainForm">
<table>
<tr>
<td> Filter by: </td>
<td>
<div id="first">
<select id="first_dropdown">
<option value="All">All</option>
<option value="Degree">Degree</option>
<option value="City">City</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<div id="second">
<select id="second_dropdown">
</select>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<script src = "https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('#first_dropdown').change(function()
$.ajax(
'type' : 'post',
'url' : 'getDropdownOptions.php',
'data': 'first=' + $(this).val(),
'success' : function(data)
$('#second_dropdown').html(data);
);
);
);
</script>
getDropdownOptions.php
<?php
$link = mysql_connect("localhost", "root", "");
if (!$link)
die('Could not connect: ' . mysql_error());
if (mysql_select_db("myDatabase", $link))
$first = mysql_real_escape_string($_REQUEST["first"]);
$query = "SELECT " . $first . " FROM myTable GROUP BY " . $first;
$data = mysql_query($query);
$rtn_data = '';
while ($row = mysql_fetch_row($data))
$rtn_data .= "<option value=\"" . $row[0] . "\">" . $row[0] . " </option>";
echo $rtn_data;
exit;
echo mysql_error();
?>
【讨论】：
【参考方案5】：Divyesh here, your answer is
==============================
edit.php
==============================
<!-- edit.php -->
<?php
include("config.php");
$id=$_REQUEST['id'];
echo $id;
$query=mysqli_query($con,"SELECT * FROM register r
INNER JOIN country c ON r.cuid = c.cuid
INNER JOIN state s ON r.sid = s.sid
INNER JOIN city ct ON r.cid = ct.cid where id='$id'");
while($r=mysqli_fetch_array($query))
$fn=$r['firstname'];
$add=$r['address'];
$gn=$r['gender'];
$hobby=$r['hobby'];
$h=explode(',',$hobby);
$q=array('reading','traveling','cricket','drawing');
$country=$r['cuid'];
$state=$r['sid'];
$city=$r['cid'];
echo $gn;
$edu= $r['education'];
$email=$r['email'];
$pass=$r['password'];
$conpass=$r['conpassword'];
$phno=$r['phoneno'];
?>
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
$('#country').on('change',function()
var countryID = $(this).val();
if(countryID)
$.ajax(
type:'POST',
url:'ajaxData.php',
data:'cuid='+countryID,
success:function(html)
$('#state').html(html);
$('#city').html(html);
);
else
$('#state').html(html);
$('#city').html(html);
);
$('#state').on('change',function()
var stateID = $(this).val();
if(stateID)
$.ajax(
type:'POST',
url:'ajaxData.php',
data:'sid='+stateID,
success:function(html)
$('#city').html(html);
);
else
$('#city').html(html);
);
);
</script>
</head>
<body>
<form method="post" action="update.php">
<table border="1" align="center">
<caption>Edit user data</caption>
<tr>
<td>First name</td>
<td><input type="text" name="fn" value="<?php echo $fn;?>"></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="add" value="<?php echo $add;?>"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="gn" value="male" <?php echo ($gn=='male')?'checked':'' ; ?> size="17">Male
<input type="radio" name="gn" value="female" <?php echo ($gn=='female')?'checked':'' ; ?> size="17">Female
</td>
</tr>
<tr>
<td>Hobby</td>
<td><input type="checkbox" name="hobby[]" value="reading" <?php if(in_array('reading',$h))echo ("checked:'checked'");?> >reading
<input type="checkbox" name="hobby[]" value="traveling" <?php if(in_array('traveling',$h))echo ("checked:'checked'");?> >traveling
<input type="checkbox" name="hobby[]" value="cricket" <?php if(in_array('cricket',$h))echo ("checked:'checked'");?> >cricket
<input type="checkbox" name="hobby[]" value="drawing" <?php if(in_array('drawing',$h))echo ("checked:'checked'");?> >drawing</td>
</tr>
<?php
$query = mysqli_query($con,"SELECT * FROM country");
//Count total number of rows
$rowCount = mysqli_num_rows($query);
?>
<td>Country</td>
<td><select name="country" id="country">
<option value="<?php echo $country;?>"><?php echo $country;?></option>
<?php
if($rowCount > 0)
while($row = mysqli_fetch_array($query))
echo '<option value="'.$row['cuid'].'">'.$row['country'].'</option>';
else
echo '<option value="">Country not available</option>';
?>
</select>
</td></tr>
<tr>
<td>State</td>
<td>
<select name="state" id="state">
<option value="<?php echo $state;?>"><?php echo $state;?></option>
</select>
</td></tr>
<tr>
<td>City</td>
<td>
<select name="city" id="city">
<option value="<?php echo $city;?>"><?php echo $city;?></option>
</select>
</td>
</tr>
<tr>
<td>Education</td>
<td><input type="text" name="edu" value="<?php echo $edu;?>"></td>
</tr>
<td>Email</td>
<td><input type="text" name="email" value="<?php echo $email;?>"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="pass" value="<?php echo $pass;?>"></td>
</tr>
<tr>
<td>Confirm password</td>
<td><input type="text" name="conpass" value="<?php echo $conpass;?>"></td>
</tr>
<tr>
<td>Phone no</td>
<td><input type="text" name="phno" value="<?php echo $phno;?>"></td>
</tr>
<tr>
<td><input type="hidden" name="id" value="<?php echo $id;?>">
<input type="submit" name="update" value="update"></td>
</tr>
</table>
</form>
</body>
</html>
================
<h3>ajaxData.php</h3>
================
<!--ajaxData.php-->
<?php
//Include database configuration file
include("config.php");
if(isset($_POST["cuid"]) && !empty($_POST["cuid"]))
//Get all state data
$query = mysqli_query($con,"SELECT * FROM state WHERE cuid = ".$_POST['cuid']."");
//Count total number of rows
$rowCount = mysqli_num_rows($query);
//Display states list
if($rowCount > 0)
echo '<option value="">Select state</option>';
while($row = mysqli_fetch_array($query))
echo '<option value="'.$row['sid'].'">'.$row['state'].'</option>';
else
echo '<option value="">State not available</option>';
if(isset($_POST["sid"]) && !empty($_POST["sid"]))
//Get all city data
$query = mysqli_query($con,"SELECT * FROM city WHERE sid =".$_POST['sid']."");
//Count total number of rows
$rowCount = mysqli_num_rows($query);
//Display cities list
if($rowCount > 0)
echo '<option value="">Select city</option>';
while($row = mysqli_fetch_array($query))
echo '<option value="'.$row['cid'].'">'.$row['city'].'</option>';
else
echo '<option value="">City not available</option>';
?>
【讨论】：
以上是关于填充下拉列表 - PHP Ajax MySQL的主要内容，如果未能解决你的问题，请参考以下文章
php mysql jquery ajax 查询数据库三级联动
jquery - 如何使用通过 AJAX 从 MySQL 和 PHP 检索的数据将图像添加到 Select2 下拉列表？