根据第一个选择填充第二个选择框的选项.两者都是 PHP 数组 [英] Make the options of the 2nd select box populate depending on the 1st. Both are PHP arrays
本文介绍了根据第一个选择填充第二个选择框的选项.两者都是 PHP 数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的数据库中有两个名为 customers 和 vessels 的 innoDB 表.我还有一个带有 2 个选择框的表单，其中一个列有:company_name of table:customers 作为选项，另一个有列:vessel_name 表:容器.
I have two innoDB tables in my database named customers and vessels. I also have a form with 2 select boxes one having the column: company_name of table: customers as options, and the other having the column: vessel_name of table: vessels.
我想要做的是根据在第一个选择框中选择的客户公司名称填充第二个选择框的选项.
What i want to do is make the options of the 2nd select box populate according to the customer's company_name chosen in the 1st select box.
最后请考虑到我是 Javascript 和 jQuery 的完全新手，这就是为什么我在这里问我如何才能达到上述结果.
Finally please take into consideration that i am a complete newbie in Javascript and jQuery and thats why i am asking here how can i achieve the above result.
形式:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="ypo" method="post">
<select name="company_name">
<?php
foreach($pelates as $pelend) {
?>
<option value="<?php echo $pelend->company_name; ?>"><?php echo $pelend->company_name; ?></option>
<?php
}
?>
</select>
<select name="vessel">
<?php
foreach($ploia as $end) {
?>
<option value="<?php echo $end->vessel_name; ?>"><?php echo $end->vessel_name; ?></option>
<?php
}
?>
</select>
</form>
</body>
</html>
使上述表单工作的 php :
The php to make the above form work :
<?php
// For customers
$sqlpelates = "SELECT * FROM customers ORDER BY company_name";
if($pelat = $db->query($sqlpelates)) {
$pelates = array();
while($pelate = $pelat->fetch_object()) {
$pelates[] = $pelate;
}
$pelat->free();
}
// For vessels
$sqlploia = "SELECT * FROM vessels ORDER BY vessel_name";
if($plo = $db->query($sqlploia)) {
$ploia = array();
while($ploi = $plo->fetch_object()) {
$ploia[] = $ploi;
}
$plo->free();
}
?>
更新:下面是我试图实现上述结果的单个 .php 页面:
UPDATE: Below is the single .php page where i am trying to achieve the above result:
<?php
require 'db/connect.php';
//check if this is an ajax call
$ajax = isset($_POST['ajax']) ? $_POST['ajax'] : false;
if (!$ajax) {
// if not then this is a fresh page that needs everything
$sqlpelates = "SELECT * FROM customers ORDER BY company_name";
if ($pelat=$db->query($sqlpelates)) {
$pelates = array();
while($pelate=$pelat->fetch_object()) $pelates[] = $pelate;
$pelat->free();
}
}
// modify the query to filter out only what your ajax request wants
$where = $ajax ? ' WHERE company_name="'.$_POST['companyName'].'"' : '';
// you need to make sure to escape the incoming variable $_POST['company_name']
$sqlploia = 'SELECT * FROM vessels'.$where.' ORDER BY vessel_name';
if ($plo=$db->query($sqlploia)) {
$ploia = array();
while($ploi=$plo->fetch_object()) $ploia[] = $ploi;
$plo->free();
}
// the secret sauce... and some very bad programming, this should be done some other way
if ($ajax) {
// set the type, so the client knows what the server returns
header('Content-Type: application/json');
// output what the client asked for: an array of vessels in JSON format
echo json_encode($ploia);
// kill the script, this is all the client wants to know
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="jquery.js">
// Your code goes here.
// jQuery must be loaded already
$(function(){
var
// put the target php script
url = 'http://prinseapals-marine.com/filing/drop_down.php',
form=$('form[name="ypo"]'), company, vessels;
company = {
// I prefer using native DomElements sometimes
selectBox : $(form).find('select[name="company_name"]')[0],
onSelect : function () {
var
idx = company.selectBox.selectedIndex,
data;
// if user selected an empty option, clear and return
if (idx === -1) {vessels.clearBox();return;}
// setup the data
data = {"ajax":1,"company_name":company.selectBox[idx].value};
// your script now has $_GET['ajax'], $_GET['company_name']
$.post(url,data,vessels.fillBox,'json');
// vessels.fillbox will be executed when your php script returns
}
};
vessels = {
// I prefer using native DomElements sometimes
selectBox : $(form).find('select[name="vessel"]')[0],
// a handy method for clearing options
clearBox : function () {$(this.selectBox).empty()},
// called upon completion of the ajax request
fillBox : function (arrayOfVessels) {
// clear current contents
$(this.selectBox).empty();
// for each element in the array append a new option to the vessel selector
arrayOfVessels.forEach(function(v){
$(vessels.selectBox).append('<option value="'+v+'">'+v+'</option>');
});
}
};
// add a listener to the company selector
$(company.selectBox).change(company.onSelect);
});
</script>
<form name="ypo" method="post">
<select name="company_name">
<?php
foreach($pelates as $pelend) {
?>
<option value="<?php echo $pelend->company_name; ?>"><?php echo $pelend->company_name; ?></option>
<?php
}
?>
</select>
<select name="vessel">
<?php
foreach($ploia as $end) {
?>
<option value="<?php echo $end->vessel_name; ?>"><?php echo $end->vessel_name; ?></option>
<?php
}
?>
</select>
</form>
</body>
最终更新:
test.php:
<?php
require 'db/connect.php';
$cus = array();
if($cterm = $db->query("SELECT * FROM `customers`")) {
while($cterm2 = $cterm->fetch_object()) {
$cus[] = $cterm2;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form id="form1" name="myform">
<select name="selection" onchange="load('bdiv', 'test2.php');">
<?php
foreach($cus as $c) {
?>
<option value="<? echo $c->company_name ?>"><? echo $c->company_name ?></option>
<?php
}
?>
</select>
<div id="bdiv"></div>
</form>
</body>
</html>
test.js:
function load (thediv, thefile) {
// body...
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(thediv).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET', thefile+'?selection='+document.myform.selection.value, true);
xmlhttp.send();
}
test2.php:
<?php
require 'db/connect.php';
if (isset($_GET['selection'])) {
# code...
$selection = $_GET['selection'];
}
$ves = array();
if ($vterm = $db->query(
"SELECT `vessel_name` FROM `vessels` WHERE `company_name` = '$selection'")) {
while ($vterm2 = $vterm->fetch_object()) {
$ves[] = $vterm2;
}
} else {
echo 'Please type a customer name.';
}
?>
<select>
<?php
foreach($ves as $v) {
?>
<option value="<?php echo $v->vessel_name ?>" ><?php echo $v->vessel_name ?></option>
<?php
}
?>
</select>
推荐答案
这不是我第一次看到这个问题，但我会深入研究
This is not the first time I see this asked but I will dive in
警告:这个答案有 javascript 和 jQuery.之后我还将附加一个 php 文件并进行一些更改，以允许为 ajax 请求调用相同的脚本
Warning: this answer has javascript, with jQuery. I will also append a php file afterwards with some changes to allow the same script to be called for the ajax request
// jQuery must be loaded already
$(function(){
var
// put the target php script
url = 'http://localhost/test/stackoverflow.php',
form=$('form[name="ypo"]'), company, vessels;
company = {
// I prefer using native DomElements sometimes
selectBox : $(form).find('select[name="company_name"]')[0],
onSelect : function () {
var
idx = company.selectBox.selectedIndex,
data;
// if user selected an empty option, clear and return
if (idx === -1) {vessels.clearBox();return;}
// setup the data
data = {"ajax":1,"company_name":company.selectBox[idx].value};
// your script now has $_GET['ajax'], $_GET['company_name']
$.post(url,data,vessels.fillBox,'json');
// vessels.fillbox will be executed when your php script returns
}
};
vessels = {
// I prefer using native DomElements sometimes
selectBox : $(form).find('select[name="vessel"]')[0],
// a handy method for clearing options
clearBox : function () {$(this.selectBox).empty()},
// called upon completion of the ajax request
fillBox : function (arrayOfVessels) {
// clear current contents
$(this.selectBox).empty();
// for each element in the array append a new option to the vessel selector
arrayOfVessels.forEach(function(v){
$(vessels.selectBox).append('<option value="'+v+'">'+v+'</option>');
});
}
};
// add a listener to the company selector
$(company.selectBox).change(company.onSelect);
});
js 代码背后的逻辑是允许用户交互.当用户做出选择时，会向服务器发出请求，并在客户端处理响应并填充您的第二个
The logic behind the js code is to allow user interaction. When the user makes a selection a request is fired to the server and the response is processed in the client and populates your 2nd <select>
现在，您的 php 脚本的修改版本(警告:这适用于我接下来附加的模板)
Now, a modified version of your php script (warning: this works with the template I append next)
<?php
// your model, check for whitespaces outside php tags, do not allow output yet
require 'db/connect.php';
// check if this is an ajax call
$ajax = isset($_POST['ajax']) ? $_POST['ajax'] : false;
if (!$ajax) {
// required for the template
$pelates = array();
// if not then this is a fresh page that needs everything
$sqlpelates = "SELECT * FROM customers ORDER BY company_name";
if ($pelat=$db->query($sqlpelates)) {
while($pelate=$pelat->fetch_object()) $pelates[] = $pelate;
$pelat->free();
}
} else {
// modify the query to filter out only what your ajax request wants
$where = ' WHERE company_name="'.$_POST['companyName'].'"';
// required for the ajax request
$ploia = array();
// you need to make sure to escape the incoming variable $_POST['company_name']
$sqlploia = 'SELECT * FROM vessels'.$where.' ORDER BY vessel_name';
if ($plo=$db->query($sqlploia)) {
while($ploi=$plo->fetch_object()) $ploia[] = $ploi;
$plo->free();
}
// the secret sauce... and some very bad programming, this should be done some other way
// set the type, so the client knows what the server returns
header('Content-Type: application/json');
// output what the client asked for: an array of vessels in JSON format
echo json_encode($ploia);
// kill the script, this is all the client want's to know
exit;
}
?>
接下来是您的 html 模板的修改版本
Next comes a modified version of your html template
<!DOCTYPE html>
<html>
<head>
<title>Your title</title>
</head>
<body>
<form name="ypo" method="post">
<select name="company_name"><?php
foreach($pelates as $p) echo '<option value="'.$p->company_name.'">'.$p->company_name.'</option>';
?></select>
<!-- leave empty, we will populate it when the user selects a company -->
<select name="vessel"></select>
</form>
<!-- add jQuery lib here, either your own or from a CDN; this is google's version 2.0.3 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- The code should be in a seperate file, load here if you want (but after jQuery lib) -->
<script src="your/javascript/file.js"></script>
</body>
</html>
好的，现在一些提示
- 你应该小心我留在那里的 php 脚本，还有其他方法可以做我想做的事情，这些方法更干净、更容易维护
- javascript 不是最好的，有更好的解决方案，所以一定要检查一下
- 如果您不理解任何脚本的部分内容，请随时提问
- 注意任何空格，在 php 脚本之前不允许有任何输出，这一点非常重要.所有输出都应该留给模板
- you should be carefull with the php script I left there, there are other ways of doing what I intended which are cleaner and easier to maintain
- the javascript is not the best, there are better solutions out there so be sure to check those out as well
- If you do not understand parts of any of the scripts don't hesitate to ask
- Beware any whitespace, do not allow any output before the php script, this is very important. All output should be left to the template
希望对你有帮助
这篇关于根据第一个选择填充第二个选择框的选项.两者都是 PHP 数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
