添加项目下拉列表

Question

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

connect.php

<?php 

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

    ?> 

MyDatabase的包含表 '用户' 与 '名称' 和 '填充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时，第二个使用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>