Question

我遇到了多个动态下拉列表。所以这是我试图解决的问题。我有以下四个存储在数据库中的示例表，并希望动态访问这些值。下拉2取决于下拉1，下拉4取决于2和3.

| ID  | name   | percent |      | ID  | name    | languageValue | 100 | 75  | 501 |
| --- | ------ | ------- |      | --- | ------- | ------------- | --- | --- | --- |
| 1   | 100%   | 100     |      | 1   | English | english       | y   | y   | n   |
| 3   | 75%    | 75      |      | 2   | German  | german        | y   | n   | n   |
| 2   | 50% 1  | 501     |      | 3   | French  | french        | n   | n   | y   |
Table 1 (Dropdown 1)            Table 2 (Dropdown 2)

| ID  | CoreSubjectName | CoreSubjectValue |   | ID  | MinorSubjectName | MinorSubjectValue |
| --- | --------------- | ---------------- |   | --- | ---------------- | ----------------- |
| 1   | Maths           | maths            |   | 1   | English          | english           |
| 2   | Politics        | politics         |   | 2   | Politics         | politics          |
| 3   | Chemics         | chemics          |   | 3   | Chemics          | chemics           |
Table 3 (Dropdown 3)                           Table 4 (Dropdown 4)

我检索第一个下拉列表的值，如下所示。（我省略了结束标签）。

<select name="percent" id ="percent" onchange="getPercent(this.value);">
    <option value="">Choose Percent</option>
<?php
   $PercentPost = $_POST["percent"];
   $PercentQuery = "SELECT percent, name FROM percentTable";
   $results=mysqli_query($conn, $anteilQuery);
   //loop
   while ($row = mysqli_fetch_array($results)){
       echo '<option value="'.$row[percent].'">'.$row[name].'</option>';
   }
?>
<select name="language" id="language">
            <option value=""></option>
        </select>

用于填充第二个Dropdown的js-ajax：

function getPercent(val){
        //ajax function
        $.ajax({
            type: "POST",
            url: "form.php",
            data: "percent="+val,
            success: function(data){
                $("#language").html(data);
            }
        });

    }

form.php到目前为止包含此代码段：

$PercentPost = $_POST["percent"];
if (!empty($_POST["percent"])) {

    $query="SELECT name, languageValue FROM table2 WHERE `$PercentPost`='y'";

    $results = mysqli_query($conn, $query);

    while ($row = mysqli_fetch_array($results)){
        echo '<option value="'.$row[languageValue].'">'.$row[name].'</option>';
    }
}

这很好用，但现在我不知道如何动态填充下拉列表4。在下拉列表4中，选择的值2和3不应该是可选的。我知道必须用js的ajax完成，但我不知道如何。

有人可以帮帮我吗？ Thanx很多！

Answer 1

因此，您将DropDown 4加载为已禁用（disabled属性）或不可见（style="display:none;"）。

我将向DropDown 2和3添加一个默认值，例如select ...，其值为0或-1（例如，参见下一个PHP代码）

然后我将为DropDown 2和3添加onchange属性，它们将调用相同的js函数：

function loadDD4Values(){
    if ($('#language').val() <> 0 && $('#coreSubject').val() <> 0){
         //ajax function
        $.ajax({
            type: "POST",
            url: "form.php", //You can detect what to do based on params, or have a different PHP page
            data: "language="+$('#language').val() + "&coreSubject=" + $('#coreSubject').val() ,
            success: function(data){
                $("#minorSubject").html(data);
                $('#minorSubject').style.display = '';//or remove attribute disabled, also if you want you can disable/hide DropDown 2 and 3 here
            }
        });
    }else{
        $('#minorSubject').style.display = 'none'; //or add attribute disabled
    }

    //Also here you can decide what to do if the user modify DropDown 2 or 3  for example, reset the DropDown 4 values, or just the selected one:
    $('#minorSubject').selectedValue = 0;
}

然后你的PHP可能是：

if( isset($_POST['percent']) ){
    // Your code from the DropDown 2
}else if (isset($_POST['language']) && isset($_POST['coreSubject'])){
    //You didn't had sql injection protection in your question code !!!
    $language = mysql_real_escape_string($_POST['language']);
    $coreSubject = mysql_real_escape_string($_POST['coreSubject']);

    $query="SELECT ... FROM minorSubject WHERE `$language`='...' AND `$coreSubject`='...'";

    $results = mysqli_query($conn, $query);

    echo '<option value="0">Select ...</option>'; // A default row
    while ($row = mysqli_fetch_array($results)){
        echo '<option value="'.$row[ID].'">'.$row[...].'</option>'; //Use ID for the value, It's made for that
    }
}

代码未经过测试，因此会出现一些拼写错误...，根据您自己的使用情况进行调整。

不要犹豫，要求提供补充信息。

多个相关的下拉菜单

1 个答案: