提问人：jujbaks 提问时间：4/23/2023 最后编辑：jujbaks 更新时间：4/23/2023 访问量：52
使用 AJAX 填充基于下拉菜单的文本值
Using AJAX to Populate Text Values Based on Drop Down Menu
问：
我有两个文件。使用一个，我创建了一个下拉列表和文本框，应该根据下拉菜单的选择来填充这些下拉列表和文本框。我已经能够创建下拉菜单以及文本框，但它们似乎没有正确填充。我的最终目标是根据下拉菜单选择更改文本框值。我对 php 和 js 很陌生，所以如果我的代码中有任何明显的错误，请随时解决它们。我真的很感激你的帮助。只是为了扩展表名称是 Colleges。
文件名： new1.php
<?php
include "connect.php";
$db = new mysqli('localhost', $dbuser, $dbpass, $dbname);
?>
<!doctype html>
<html>
<head>
<title>College Compare</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#coll_array").change(function(){
var colid = $(this).val();
$.ajax({
url: 'new.php',
type: 'post',
data: {col:colid},
dataType: 'json',
success:function(response){
var len = response.length;
//$("#coll_array").empty();
for( var i = 0; i<len; i++){
var snn = response[i]['School Name'];
var gpa = response[i]['Avg GPA'];
var sat = response[i]['Avg SAT'];
var c15= response[i]['c15'];
var earnings= response[i]['earnings'];
var wdrawal= response[i]["wdrawal"];
document.getElementById('snn').value=response[i]['School Name'];
document.getElementById('gpa').value=response[i]['Avg GPA'];
document.getElementById('sat').value=response[i]['Avg SAT'];
document.getElementById('c15').value=response[i]['c15'];
document.getElementById('earnings').value=response[i]['earnings'];
document.getElementById('wdrawal').value=response[i]['wdrawal'];
}
}
});
});
});
</script>
</head>
<body>
<?php
include ("connect.php");
$db = new mysqli('localhost', $dbuser, $dbpass, $dbname);
if (!$db) {
exit('Connect Error (' . mysqli_connect_errno() . ') '
. mysqli_connect_error());
}
?>
<div class="label">Select Name:</div>
<select name="Schoolnames" id="coll_array">
<option value = ""></option>
<?php
$queryusers = "SELECT `School Name` FROM `Colleges` ";
$db = mysqli_query($db,$queryusers);
while ( $d=mysqli_fetch_assoc($db)) {
echo "<option value='".$d['School Name']."'>".$d['School Name']."</option>";
}
?>
</select>
<div class="clear"></div>
<div class="container">
<div class="column">
<div class="table-responsive">
<table class="table table-bordered">
<th>Average GPA</th>
<th>Average SAT</th>
<th>6 Year Graduation Rate</th>
<th>Median Earnings 6 Years After Graduation</th>
<th>3 Year Withdrawal Rate</th>
</thead>
<tbody>
<div class="container">
<div class="textbox">
<div class="table-responsive">
<table class="table table-bordered">
School Name: <input type="text" id="snn" value="">
Avg GPA: <input type="text" id="gpa" value="">
Avg SAT: <input type="text" id="sat" value="">
6 Year Grad Rate: <input type="text" id="c15" value="">
Median Earnings 6 Years After Graduation: <input type="text" id="earnings" value="">
3 Year Withdrawal Rate: <input type="text" id="wdrawal" value="">
</thead>
<tbody>
文件名： new.php
<?php
include "connect.php";
$con = new mysqli('localhost', $dbuser, $dbpass, $dbname);
$departid = 0;
if(isset($_POST['col'])){
$departid = mysqli_real_escape_string($con,$_POST['col']); // department id
}
if (!empty($departid)){
$sql = "SELECT * FROM `Colleges` WHERE `School Name`='".$departid."'";
$result = mysqli_query($con,$sql);
while( $row = mysqli_fetch_array($result) ){
$sat = $row['Avg SAT'];
$gpa = $row['Avg GPA'];
$snn = $row['School Name'];
$c15 = $row['c15'];
$earnings = $row['earnings'];
$wdrawal = $row['wdrawal'];
$coll_arr[] = array("School Name" => $snn, "Avg GPA" => $gpa, "Avg SAT" => $sat, "c15" => $c15, "earnings" => $earnings, "wdrawal" => $wdrawal);
}
}
// encoding array to json format
echo json_encode($coll_array);
答： 暂无答案
评论