javascript - 如何在不使用 $_POST 的情况下获取下拉列表中所选项目的值并传递它

Question

我需要在第一个下拉列表中获取所选项目的值，因为在第二个下拉列表中，将显示的列表将取决于第一个下拉列表中的值。这是我的编码。顺便说一句，我正在使用 PHP。

在这里我显示区域列表，然后当区域已经被选择时，仅在该区域下的省份应该显示在第二个下拉列表中。

首先下拉:

<p><b>Region:</b>
<select class="w3-select" name="region" id="region_value"     
onChange="myFunction()" required>
<option value="">--- Select Region ---</option>
<?php 
    $Region = $FormModel->RegionList();
    foreach($Region as $RegionList) {
?>
<option id="option" value="<?php echo $RegionList['region_code']?>"><?php   
echo $RegionList['region_name'] ?> </option> </p>
<?php } ?>
</select>

第二个下拉列表:

<p><b>Province:</b>
<select class="w3-select" name="province" id="demo"  required>
<option value="">--- Select Province ---</option>
<?php 
    $Province = $FormModel->ProvinceList();
    foreach($Province as $ProvinceList) {
?>
<option value="<?php echo $ProvinceList['prov_code']?>"> <?php echo   
$ProvinceList['prov_name'] ?> </option> </p>
<?php } ?>
</select>

我这里有一个 java 脚本获取所选项目的值，但我不知道如何将它作为属性传递以将值设置为区域代码。我有一个 setter 和 getter，我将首先在其中设置区域代码，然后在我的查询中获取区域代码的值。但它不起作用。

<script>
function myFunction() {
var x = document.getElementById("region_value").value;
$FormModel = new Form(x);

}
</script>

这是我获取省份列表的查询。

public function ProvinceList(){

    $region = $this->getRegion();
    $sql = "SELECT prov_code,psgc_prv, prov_name FROM lib_provinces WHERE  
    region_code='$region' ORDER BY prov_name"; 


    $this->openDB();
    $this->prepareQuery($sql);
    $result = $this->executeQuery();
    $recordlist = array();
    $trash = array_pop($recordlist);

    foreach($result as $i=>$row){

                $row_data = array(
                    "prov_code"=>$row["prov_code"],
                    "psgc_prv"=>$row["psgc_prv"],
                    "prov_name"=>$row["prov_name"]
                );
            $recordlist[$i] = $row_data;
    }
    $this->closeDB();
    return $recordlist;

}

如果有人能在这项工作中回答我，我会很有帮助。谢谢!

Answer 1

如果一次获取所有省份是一个选项，您应该通过 javascript 执行此操作。

您需要将所有项目都放在一个 javascript 变量中，并用这些值填充您的选择。OnChange 你应该只使用适用的值来过滤值

<script>

var optionItems;    
var values = <?php echo json_encode($ProvinceList) ?>;
refreshOptions(values);

function refreshOptions(listItems, x) {
    x = x || 0;
    var sel = document.getElementById('demo');
    sel.innerHTML = "";
  for(var i = 0; i < listItems.length; i++) {
        if ((x == 0) || (listItems[i].psgc_prv == x)) {
        var opt = document.createElement('option');
        opt.innerHTML = listItems[i].prov_name;
        opt.value = listItems[i].prov_code;
        sel.appendChild(opt);
      }
  }
}

function myFunction() {
    var x = document.getElementById("region_value").value;

    refreshOptions(values, x);
}
</script>

第二个下拉菜单就是

<select class="w3-select" name="province" id="demo"  required>
</select>

这意味着在对数据库的 php 查询中停止过滤

 $sql = "SELECT prov_code,psgc_prv, prov_name FROM lib_provinces ORDER BY prov_name"; 

请参阅带有工作示例的 feedle(没有 php) https://fiddle.jshell.net/7k18euhw/3/

---

编辑，因为有另一个选择级别的新请求

如果您有很多自治市，那么以与省份相同的方式获得所有自治市的方法并不是一个好主意。在这种情况下，您将需要使用 ajax 来获取它们。

这是你需要做的:

• 有一个可访问的 url，该 url 接收一个省 ID 作为参数并返回一个包含市政列表的 json

根据您使用 php 的方式，有很多方法可以做到这一点，例如，如果您有一个框架，您应该有一个 Controller ，只是 vainilla php 应该是这样的。

mun-list.php

echo json_encode($FormModel->ProvinceList($_GET['prov_id']));

• 获取各省的 onChange 事件(与处理区域的方式相同)并对您刚刚创建的服务进行 ajax 调用。

Kaja 已经建议您应该使用 jquery 来执行此操作 (http://jquery.com/)

function onProvChange() {
        var prov_id = $("#prov_select").val();
        $.ajax({
            url: 'mun-list.php?prov_id='+prov_id, 
            type: 'GET',
            success: function(data) {
                //without a lot of detail this should populate in the way you did before
                refreshMunicipalities(data);
            }
        });

}

没有它你也可以做到，但更难，看看这篇文章。 How to make an AJAX call without jQuery?