使用選擇選項值填充更改表格

Question

即時更新至php和ajax，並且希望顯示充滿數據庫內容的表格。我成功地做到了，但現在我試圖用select更改表格內容。我知道有很多網站解釋如何做，但我不知道怎麼做。對我來說最好的解決方案是通過改變表格而無需重新加載頁面或使用單獨的按鈕重新加載它。

我讀過關於使用ajax/javascript的方法，但正如我所提到的那樣，我對這些事情並不熟悉。

下面是我的代碼已經workin。

PHP：

<?php 

$mysqlhost="localhost"; // 
$mysqluser="root"; // 
$mysqlpwd=""; // 
$mysqldb="wordpress"; // 


$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd); 
mysql_select_db($mysqldb, $connection); 


$sql = "SELECT id, user_email FROM wp_users"; 
$db_query = mysql_query($sql); 


?> 
<table cellpadding="1" cellspacing="3" border="1"> 
    <tr> 
     <td>ID</td> 
     <td>Mail</td> 
    </tr> 
<?php 

    while ($adr = mysql_fetch_array($db_query)){ 
?> 

    <tr> 
     <td><?=$adr['id']?></td> 
     <td><?=$adr['user_email']?></td> 
    </tr> 
<?php 
    } 
?> 
</table> 

我的選擇：

<select name="Choose" title="chose"> 
<option value="one" id="One">One</option> 
<option value="two" id="Two">Two</option> 
<option value="three" id="Three">Three</option> 
</select> 

編號真的很感激一些代碼或提示如何做到這一點。

Answer 1

下面是代碼：

HTML：

<table id="tableid"> //mention id for a table 
...... 
...... 
</table> 

// create an event for select 
<select name="Choose" title="chose" onchange="getajax(this.value)"> 
<option value="one" id="One">One</option> 
<option value="two" id="Two">Two</option> 
<option value="three" id="Three">Three</option> 
</select> 

的JavaScript：

function getajax(value){ 
$.ajax({ 
type: "GET", 
url: "Ajaxpage.php", 
data: {text:value}, 
success: function(data) { 
    $("#tableid").html(data); 
} 
}); 
} 

Ajaxpage.php：

<?php 
$mysqlhost="localhost"; // 
$mysqluser="root"; // 
$mysqlpwd=""; // 
$mysqldb="wordpress"; // 


$connection=mysqli_connect($mysqlhost, $mysqluser, $mysqlpwd); //use mysqli instead of mysql 

mysqli_select_db($mysqldb, $connection); 


$sql = "SELECT id, user_email FROM wp_users where someid='".$_GET['text']."'"; 

$query = mysql_query($sql); 
while($row= mysql_fetch_array(query)){ 
echo "<tr><td>".$row['id']."</td><td>".$row['user_email']."</td></tr>"; 

} 


?> 

Answer 2

<script> 
function reloadWithOptionValue(){ 
document.FilterFrom.submit(); 
} 
</script> 
<?php 

$mysqlhost="localhost"; // 
$mysqluser="root"; // 
$mysqlpwd=""; // 
$mysqldb="wordpress"; // 


$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd); 

mysql_select_db($mysqldb, $connection); 


$sql = "SELECT id, user_email FROM wp_users"; 
if(isset($Choose) && !empty($Choose)){ 
     $sql.=" where id like '%$Choose%' or user_email like '%$Choose%'"; 
} 
$db_query = mysql_query($sql); 


?> 

<form method="post" name="FilterFrom"> 
<table cellpadding="1" cellspacing="3" border="1"> 

    <tr> 

     <td>ID</td> 

     <td>Mail</td> 

    </tr> 
<?php 

    while ($adr = mysql_fetch_array($db_query)){ 

?> 

    <tr> 

     <td><?=$adr['id']?></td> 

     <td><?=$adr['user_email']?></td> 

    </tr> 

<?php 

    } 

?> 

</table> 
<select name="Choose" title="chose" onchange="reloadWithOptionValue()"> 
<option value="one" id="One">One</option> 
<option value="two" id="Two">Two</option> 
<option value="three" id="Three">Three</option> 
</select> 
</form> 

試試這個