添加項目下拉列表

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>