添加项目下拉列表

Question

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

connect.php

<?php

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

    ?>

mydatabase 包含表 'Users' 和 'Name' 和 'NameID' 列。

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>