Question

我有一个下拉列表，其中填充了我的数据库“mydatabase”中的项目。

connect.php

<?php

    $dbname = 'mydatabase';
    $dbuser = 'louie';
    $dbpass = '';

    ?>

mydatabase包含带有'Name'和'NameID'列的'Users'表。

的index.php

<?php
include ("connect.php");

$mysqli = new mysqli("localhost", $dbuser, $dbpass, $dbname);

if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

?>

<div class="label">Select Name:</div>

<select name="names" onchange="change(this.value)">
<option value = "none">---Select---</option>

<?php

    $query = "SELECT `Name` FROM `Users`";
    $mysqli = mysqli_query($mysqli, $query);

    while ($d=mysqli_fetch_assoc($mysqli)) {
        echo "<option value='{".$d['Name']."}'>".$d['Name']."</option>";
    }
?>
</select>  

<select name="nid" id="nameid">
</select>

在我的名字栏中有两个值。 Louie和Jane填补了第一个下拉名单。我想要做的是每当我选择Louie时，带有id'nameid'的第二个下拉列表将填充我数据库中的NameID列。

我有一些想法，禁用第二次下拉但没有数据库。

<script>
    function change(value) {
        if(value=="none")
            document.getElementById("nameid").disabled=true;
        else
            document.getElementById("nameid").disabled=false;
    }
</script>

但我不知道如何通过在第一个下拉列表中选择Louie来填充NameID列的第二个下拉列表。

Answer 1

尝试这样的事情：

var x = document.createElement("OPTION");
x.text = value;
var s = document.getElementById("nameid");
s.add(x);

Answer 2

这里的诀窍是要了解只有PHP可以访问您的数据库，并且对UI更改做出反应是一个JavaScript问题。这意味着如果你想在你的第二个下拉列表中使用nameID，php首先需要已经在某个地方提供它，接下来你需要一些javascript来实际显示它。

这是一个可能的解决方案：

<!-- note I changed the function onchange="change(this.value)" to onchange="change(this)"
because this.value is actually not the value.. -->
<select name="names" onchange="change(this)">
<option value = "none">---Select---</option>

<?php

// Select both columns you want to use in PHP
$query = "SELECT `NameID`, `Name` FROM `Users`";
$mysqli = mysqli_query($mysqli, $query);

// I used the value field to hold the id, rather than the name, while the name is shown to the user.
while ($d=mysqli_fetch_assoc($mysqli)) {
    echo "<option value='".$d['NameID']."'>".$d['Name']."</option>";
}

// your other code...
?>

<script>
    function change(oSelect) {
        var value = oSelect.options[oSelect.selectedIndex].value;
        var name = oSelect.options[oSelect.selectedIndex].innerHTML;

        if(name=="Louie") {
            document.getElementById('nameid').innerHTML = "";
            for (var i=0; i<oSelect.options; i++) {
                document.getElementById('nameid').innerHTML += "<option value='"+oSelect.options[i].value+"'>"+oSelect.options[i].value+"</option>";
            }

        }
    }
</script>

添加项目下拉列表

2 个答案: