Javascript HTML表单-需要js/php组合功能

我有两个下拉列表。两者都将由PHP通过mysql查询填写。我的问题是，如果这些列表选择发生更改，我希望表单能够响应。例如，我需要根据第一个列表的选择，通过另一个查询填充第二个列表

问题是：我需要“on_change”来发布表单数据并触发PHP而不是Javascript。 是否有一种方法可以在Javascript中收集该选择，然后将其发送到PHP，然后重新填充表单？希望我说清楚了。 谢谢

---

Dana使用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\";
            }

功能更改国家（）{
var e=document.getElementById（\“国家/地区id\”）；
var country\u id=e.options[e.selectedIndex]。值；
如果（国家/地区id==1）{
//显示状态
document.getElementById（'display\u province'）。style.display=\'none\'；
document.getElementById（'display\u state'）。style.display=\“\”；
document.getElementById（'display\u state'）。style.visibility=\“visible\”；
}
否则{
//显示省
document.getElementById（'display\u state'）。style.display=\“none\”；
document.getElementById（'display\u province'）。style.display=\“\”；
document.getElementById（'display\u province'）。style.visibility=\“visible\”；
//删除当前选择列表
var select=document.getElementById（'province_id'）；
for（选择中的var选项）{
选择。删除（选项）；
}
//获取国家/地区id的省份
var xmlhttp=new XMLHttpRequest（）；
//包括对IE6和IE5的修复
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}否则{
//IE6、IE5的代码
xmlhttp=新的ActiveXObject（\“Microsoft.xmlhttp\”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
var xmlDoc=xmlhttp.responseXML；
//获取每个属性
var x=xmlDoc.getElementsByTagName（“省”）；
对于（i=0；i您可以对您设置的端点进行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脚本的内容，可以通过$\u POST['data']访问。
每个人都回答说Ajax是解决方案，我同意，Ajax更优雅，但Ajax不是唯一的解决方案。我发布这个答案只是为了展示另一种方法：没有Ajax

第一个代码（combos.php）是带有一个组合的页面，当选择该组合时，将调用php。第二个代码（combos\u action.php）是根据所选选项返回值的PHP。若要使此代码正常工作，请使用给定名称创建两个文本文件，复制粘贴代码并从浏览器中使用
http://localhost/combos.php
。如果更改文件名，请在代码中也更改它们

下面是它的工作原理：页面显示一个简单的组合，其中填充了一周中的几天。当选择一天时，JavaScript的
onchange
事件触发，表单自动提交，PHP获取所选的一天并在会话中存储一些值，返回页面刷新并用这些值填充第二个组合。注释我帮助你理解：

combos.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>

<?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.
?>


何塞·曼努埃尔·阿巴卡·罗德里格斯
//选择组合#1中的任何选项时，自动提交表格#1。
已选择函数combo1\u（）{
document.getElementById（“form1”）.submit（）；
}
选择一天


星期一
星期二
星期三
你在描述AJAX，可能的答案太多，或者好的答案对于这种格式来说太长。请添加详细信息以缩小答案集，或者隔离一个可以在几段中回答的问题。我建议你找一个开发论坛（也许？）然后，当您遇到特定的编码问题时，请返回StackOverflow，我们将很乐意提供帮助。@DanaWhite，您可以使用传统的表单进行操作：当选择一个组合时，您发送带有所选值的表单，PHP作出响应，页面将使用第一个组合autoselected和第二个组合Different刷新ent选项。或者你也可以使用Ajax作为另一个建议。我对这方面还不太熟悉。我会试试你的建议，Rodriquez先生。非常感谢。我不知道我可以在选择值时“发送”表单。我会调查一下。你不想编辑你的原始答案吗？你是如何为这样一个broa编写所有这些代码的d问题？为什么你没有为你所做的添加一个解释呢？这是我写的代码，用来解决被问到的问题。Javascript是这个问题的恰当答案。出于某种原因