我有两个下拉列表。 两者都将由PHP通过mysql查询填充。 我的问题是，如果这些列表选择发生变化，我希望表单能够响应。 例如，我需要根据第一个列表的选择，通过另一个查询填充第二个列表。
问题是：我需要"on_change"来发布表单数据并触发PHP而不是Javascript。有没有办法在Javascript中收集该选择，然后将其发送到PHP，然后重新填写表单？ 希望我说清楚。谢谢
丹娜
使用 Javascript 检测列表的变化。 发生更改时，您可以使用 PHP 脚本发出 AJAX 请求以返回新列表。 Javascript可以操作新的数据集，并用新的适当列表替换DOM。
<script type='"text/javascript'">
function changeCountry(){
var e = document.getElementById('"country_id'");
var country_id = e.options[e.selectedIndex].value;
if(country_id == 1){
// Display states
document.getElementById('display_province').style.display = '"none'";
document.getElementById('display_state').style.display = '"'";
document.getElementById('display_state').style.visibility = '"visible'";
}
else{
// Display Province
document.getElementById('display_state').style.display = '"none'";
document.getElementById('display_province').style.display = '"'";
document.getElementById('display_province').style.visibility = '"visible'";
// Remove current selection list
var select = document.getElementById('province_id');
for (var option in select){
select.remove(option);
}
// Get Provinces for country_id
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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 xmlDoc = xmlhttp.responseXML;
// get each property
var x=xmlDoc.getElementsByTagName('province');
for (i=0;i<x.length;i++)
{
var e = document.getElementById('province_id');
var opt = document.createElement('option');
opt.value = x[i].getElementsByTagName('zoneid')[0].textContent;
opt.innerHTML = x[i].getElementsByTagName('zone')[0].textContent;
e.appendChild(opt);
}
}
}
var url = 'get_provinces.php?country_id='+country_id;
// var url = 'provinces.xml';
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader('"Content-type'", '"text/xml'");
xmlhttp.send();
}
}
function changeShippingCountry(){
var e = document.getElementById('"shipto_country_id'");
var shipto_country_id = e.options[e.selectedIndex].value;
if(shipto_country_id == 1){
// Display states
document.getElementById('shipto_display_province').style.display = '"none'";
document.getElementById('shipto_display_state').style.display = '"'";
document.getElementById('shipto_display_state').style.visibility = '"visible'";
}
else{
// Display Province
document.getElementById('shipto_display_state').style.display = '"none'";
document.getElementById('shipto_display_province').style.display = '"'";
document.getElementById('shipto_display_province').style.visibility = '"visible'";
// Remove current selection list
var select = document.getElementById('shipto_province_id');
for (var option in select){
select.remove(option);
}
// Get Provinces for country_id
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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 xmlDoc = xmlhttp.responseXML;
// get each property
var x=xmlDoc.getElementsByTagName('province');
for (i=0;i<x.length;i++)
{
var e = document.getElementById('shipto_province_id');
var opt = document.createElement('option');
opt.value = x[i].getElementsByTagName('zoneid')[0].textContent;
opt.innerHTML = x[i].getElementsByTagName('zone')[0].textContent;
e.appendChild(opt);
}
}
}
var url = 'get_provinces.php?country_id='+shipto_country_id;
// var url = 'provinces.xml';
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader('"Content-type'", '"text/xml'");
xmlhttp.send();
}
}
function addProvince(){
// Get input
var np = document.getElementById('new_province').value;
// Get country_id
var e = document.getElementById('"country_id'");
var country_id = e.options[e.selectedIndex].value;
// Erase input
document.getElementById('new_province').value = '"'";
// Add to database
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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 xmlDoc = xmlhttp.responseXML;
}
}
var url = 'add_provinces.php?province='+np+'&country_id='+country_id;
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader('"Content-type'", '"text/xml'");
xmlhttp.send();
changeCountry();
changeShippingCountry();
}
function addShippingProvince(){
// Get input
var np = document.getElementById('shipto_new_province').value;
// Get country_id
var e = document.getElementById('"shipto_country_id'");
var country_id = e.options[e.selectedIndex].value;
// Erase input
document.getElementById('shipto_new_province').value = '"'";
// Add to database
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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 xmlDoc = xmlhttp.responseXML;
}
}
var url = 'add_provinces.php?province='+np+'&country_id='+country_id;
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader('"Content-type'", '"text/xml'");
xmlhttp.send();
changeShippingCountry();
changeCountry();
}
function hideShipping(){
document.getElementById('shipping').style.display = '"none'";
document.getElementById('shipping').style.visibility = '"hidden'";
}
function displayShipping(){
document.getElementById('shipping').style.display = '"'";
document.getElementById('shipping').style.visibility = '"visible'";
}
您可以对您
设置的端点进行 ajax 调用，该端点运行一些 php 代码并返回一些 JSON，然后您的 JavaScript 可以使用这些 JSON 来填充第二个列表。你的JavaScript看起来像这样：
$.ajax( "your-endpoint.php" )
.done(function(data) {
// use javascript to dynamically populate your list
var json = data;
//assuming data is a list you could iterate over it
$.each(data, function (k, v) {
//use this to populate your list
}
})
.fail(function() {
// show an error message on your form
});
PHP端点必须返回一个JSON对象，以便你的javascript可以更容易地使用它。
php 和 javascript 之间的通信通常由 Ajax 完成，这在 jQuery 中使用起来非常简单。基本语法是这样的：
$.ajax({
type: "POST",
url: "yourFile.php",
data: "{data: " + yourData + "}", //yourData is javascript variable
success: function(result){
//do something with result from php file
}
});
其中变量yourData是你想要发送到php脚本的内容，可以通过$_POST['data']访问它。
每个人都回答说Ajax是解决方案，我同意Ajax更优雅，但Ajax不是唯一的解决方案。我发布这个答案只是为了展示另一种方法：没有阿贾克斯。
第一个代码（combos.php）是带有组合的页面，当选择时，将调用PHP。第二个代码 （combos_action.php） 是 PHP，它根据所选选项返回值。要使此代码起作用，请使用给定名称创建两个文本文件，复制粘贴代码并使用http://localhost/combos.php从浏览器运行它。如果更改文件名，请在代码中也更改它们。
这是它的工作原理：该页面显示了一个简单的组合，里面充满了星期几。当选择某一天时，JavaScript 的 onchange 事件触发并自动提交表单，PHP 获取选定的日期并将一些值存储在会话中，返回到刷新的页面并用这些值填充第二个组合。注释将帮助您了解：
连击.php
<?php
session_start(); // NECESSARY TO RETRIEVE THE VALUE RETURNED FROM PHP.
?>
<html>
<head>
<title>By José Manuel Abarca Rodríguez</title>
<script type="text/javascript">
// AUTOSUBMIT FORM #1 WHEN ANY OPTION IN COMBO #1 IS SELECTED.
function combo1_selected () {
document.getElementById( "form1" ).submit();
}
</script>
</head>
<body>
<!-- THIS IS COMBO #1. -->
<form id="form1" method="post" action="combos_action.php">
Select a day
<br/>
<select name="combo1" onchange="combo1_selected()"> <!-- NOTICE THE EVENT! -->
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
</select>
</form>
<?php
// DISPLAY COMBO #2 ONLY IF COMBO #1 WAS SELECTED.
if ( isset( $_SESSION[ "combo2" ] ) )
{ echo "<br/>" .
"<br/>" .
"Options for <b>" . $_SESSION[ "combo1" ] . "</b>" .
"<br/>" .
"<select name='combo2'>";
// SEPARATE THE OPTIONS RETURNED FROM PHP.
$options = explode( ",",$_SESSION[ "combo2" ] );
// DISPLAY THE OPTIONS FOR THE COMBO.
for ( $i = 0; $i < count( $options ); $i++ )
echo "<option>" . $options[ $i ] . "</option>";
echo "</select>";
}
?>
</body>
</html>
combos_action.php
<?php
session_start();
$_SESSION[ "combo1" ] = $_POST[ "combo1" ]; // SELECTED OPTION.
if ( $_SESSION[ "combo1" ] == "Monday" )
$_SESSION[ "combo2" ] = "mon 1,mon 2,mon 3"; // RETURN THESE VALUES.
if ( $_SESSION[ "combo1" ] == "Tuesday" )
$_SESSION[ "combo2" ] = "tue 1,tue 2,tue 3"; // RETURN THESE VALUES.
if ( $_SESSION[ "combo1" ] == "Wednesday" )
$_SESSION[ "combo2" ] = "wed 1,wed 2,wed 3"; // RETURN THESE VALUES.
header( "Location: combos.php" ); // RETURN TO PAGE.
?>