两个 html 对象(列表、输入）应该生成第三个列表 - Two html objects (list, input) should generate a third list

我编辑了我的问题并重新开始。

我有一个包含 2 个下拉列表（#selProvincie、#selRegiune）的 html 表单。当用户从 List1 中选择新选项时，List2 必须相应地更改。这些列表是通过 MySQL 查询两个具有外键关系的表的 PHP 生成的（为简洁起见，未显示此代码）。

.HTML

<div class="input_frm">
 <form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">
<table class="input_tbl">
   <tr>
      <td class="a">Select province</td>
      <td class="b"><select id="selProvincie" name="Alfa" onchange="provincieChg()"></select></td>
      <td class="c"><input class="button_face" type="submit" value="Submit"></td>
      </tr>
   <tr>
      <td class="a">Select region</td>
      <td class="b"><select id="selRegiune" name="Beta" onchange="regiuneChg()"></select></td>
      <td class="c"></td>
      </tr>
   </table>
</form>

JavaScript

$(document).ready(function()
 {
 $.getJSON("/scripts/031A_GetProvincie.php", success = function(data)
    {
    var str_options = "";
    for (var i=0; i < data.length; i++)
        {
        str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
        }
    $("#selProvincie").append(str_options);
    $("#selProvincie").change();
    });
 $("#selProvincie").change(function()
    {
    $.getJSON("/scripts/031B_GetProvRegiune.php?provincie=" + $(this).val(), success = function(data)
       {
       var str_options = "";
       for (var i=0; i < data.length; i++)
           {
           str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
       }
     $("#selRegiune").html("");
     $("#selRegiune").append(str_options);
     $("#selRegiune").change();
     });
  });
 $("#selRegiune").change(function()
    {
    $.getJSON("/scripts/031C_GetProvRegiuneZona.php?regiune=" + $(this).val(), success = function(data)
       {
       var str_options = "";
       for (var i=0; i < data.length; i++)
           {
           str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
           }
       });
    });
 });

以上面为例（我是 JavaScript 新手），我想编写一个新表单，它在 List1 和 List2 之间插入了一个文本输入字段（Text1）。List2 是根据 List1 中选择的选项和 Text1 中的文本生成的。但我真的不知道如何使用 JavaScript 中的输入文本过程来使整个事情工作。

.HTML

<div class="input_frm">
  <form method="post" action="<?php print dataclean($_SERVER["PHP_SELF"]);?>">
    <table class="input_tbl">
      <tr>
         <td class="a">Select county</td>
         <td class="b"><select id="selJudet" name="Alfa" onchange="judetChg()"></select></td>
         <td class="c"><input class="button_face" type="submit" value="Submit"></td>
         </tr>
      <tr>
         <td class="a">Zone wildcard text</td>
         <td class="b"><select id="selText" name="Beta" onchange="textChg()"></select></td>
         <td class="c"></td>
         </tr>
      <tr>
         <td class="a">Select zone</td>
         <td class="b"><select id="selZona" name="Gamma" onchange="zonaChg()"></select></td>
         <td class="c"></td>
         </tr>          
      </table>
   </form>
 </div>

问：这个表单的JavaScript是什么？每当从 List1 中选择新选项或 Text1 中的新字符串发生更改时，List2 都应更改。

你的问题仍然有点令人困惑，但我正在假设：

用户将选择一个国家
将筛选可用区域以仅显示所选国家/地区的区域
还可以通过输入可选关键字来过滤区域
"区域"（？）将根据上述三个选择进行过滤，并显示给用户

考虑到这一点，这种组合应该可以实现您的需求。我已经将 HTML 剥离回了最基本的内容。我还更改了字段的id以匹配（我认为）您要实现的目标。

脚本可以进一步优化，但此示例应该让您走上正确的道路，但如果您有其他问题，请告诉我。

我创建了一个 JsFiddle 来演示它是如何工作的。

.HTML

<form method="post" action="">  
    Country: <select id="selectCountry" name="Alfa"></select>
    <br>
    Region:  <select id="selectRegion" name="Gamma"></select>
    <br>
    Wildcard: <input id="selectText" name="Beta">
</form>

爪哇语

$(document).ready(function() {
    // Change to match your URL
    $.getJSON("/echo/json/", function(data) {
        // Override with fake data because I can't see what the PHP generates
        data = ['Australia', 'Japan', 'Uganda'];
        var str_options = "";
        for (var i=0; i < data.length; i++) {
            str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
        }
        $("#selectCountry").append(str_options);
    });
    // Filter regions based on the selected country
    filterRegions = function() {
        country = $("#selectCountry").val();
        wildcard = $("#selectText").val();
        console.log('Search for regions that match ' + country + ' and ' + wildcard);
        // Change to match your PHP url
        $.getJSON(" /echo/json/?country=" + country + "&wildcard=" + wildcard, function(data) {
            // Override with fake data
            data = ['California', 'Florida', 'Nevada'];
            var str_options = "";
            for (var i=0; i < data.length; i++) {
                str_options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
            }
            $("#selectRegion").html(str_options);
        });
    };
    // Filter results based on the selected region and any text search
    filterResults = function(){
        country = $("#selectCountry").val();
        wildcard = $("#selectText").val();
        region = $("#selectRegion").val();
        console.log('Search for zones that match ' + country + ' and ' + wildcard + ' and ' + region);
        // Change to match your PHP url
        $.getJSON("/echo/json/?country=" + country + "&region=" + region + "&wildcard=" + wildcard, function(data) {
            // Display results as you need
        });
    };
    // Attach event handlers to relevant DOM elements (instead of using inline change="Chg()" style functions)
    $("#selectCountry").on("change", filterRegions);
    $("#selectText").on("keyup", filterRegions);
    $("#selectRegion").on("change", filterResults);
});

笔记：

您需要更新用于每个getJson()请求的 URL。网址需要将 <input> 和 <select> 标记中的值作为$_GET变量传递。

在我的示例中，我使用了假数据作为示例，因此在测试脚本时将其从脚本中删除。例如

data = ['California', 'Florida', 'Nevada'];

您不需要指定$_SERVER['PHP_SELF']因为<form>标签在没有任何action属性的情况下默认为自身。

例如

<form method="post" action="<?php print data_clean($_SERVER["PHP_SELF"]);?>">

可以简单地是：

<form method="post" action="">