Question

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

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

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都应该随时更改。

Answer 1

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

用户将选择一个国家/地区
将过滤可用区域以仅显示所选国家/地区内的区域
也可以通过输入可选关键字
＆＃34;区域＆＃34; （？）将根据以上三个选项进行过滤，并显示给用户

考虑到这一点，这种组合应该达到你所需要的。我已经将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>

的Javascript

$(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()请求使用的网址。这些网址需要将<input>和<select>代码中的值作为$_GET变量传递。

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

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

您无需指定$_SERVER['PHP_SELF']，因为<form>标记在没有任何action属性的情况下默认为自己。 E.g。

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

可以简单地说：

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

两个html对象（列表，输入）应该生成第三个列表

1 个答案:

HTML

的Javascript

注意：