当从select标记触发onChange事件时，从mysql数据库加载html表

Question

所以，这是交易。 我有一个要填充的html表。 具体来说，第一行是一个用mysql数据库中的元素填充的行。 确切地说，该表是有关手机的调查表。 第一行是从数据库加载手机名称的标题。 还有一个选择标签，其中包含公司名称作为选项。 我需要在select标签上触发一个onChange事件，以重新加载页面，并用下拉列表中当前选择的公司的手机新名称重新填充第一行。 我的选择几乎是这样的：

<select name="select" class="companies" onChange="reloadPageWithNewElements()">
<?php
    $sql = "SELECT cname FROM companies;";
$rs = mysql_query($sql);

while($row = mysql_fetch_array($rs)) {
    echo "<option value=\"".$row['cname']."\">".$row['cname']."</option>\n  ";
}
?>
</select>

所以...有没有一种方法可以使用onChange刷新此页面，并将所选值再次传递到同一页面，然后将其分配给新的php变量，这样我就可以查询需要填写的表格了吗？

<?php
//$mobileCompanies = $_GET["selectedValue"];
$sql = "SELECT mname FROM ".$mobileCompanies.";";
$rs = mysql_query($sql);
while ($row = mysql_fetch_array($rs)) { 
    echo "<td><div class=\"q1\">".$row['mname']."</div></td>";
}

?>

这样的事情。 （reloadPageWithNewElements（）和selectedValue现在只是一个想法）

Answer 1

将值保存在隐藏的input ：

<input type='hidden' value='<?php echo $row['cname'] ?>' id='someId' />

在您的JavaScript函数中，使用以下隐藏输入字段中的值：

function reloadPageWithNewElements() {
    var selectedValue = document.getElementById('someId').value;
    // refresh page and send value as param
    window.location.href = window.location + '?someVal='+ selectedValue;
}

现在再次在您的PHP文件中，从url检索此值，以用作：

$someVal = null;

if (isset($_GET['someVal']) {
          $someVal = $_GET['someVal'];
}

看看是否可行！！！

Answer 2

最好的选择是使用AJAX。

reloadPageWithNewElements（）是一个函数，该函数调用您自己站点的页面，该页面将返回要放入表中的数据。

如果您使用的是JQuery，则AJAX非常容易实现：

$.ajax({
    url: '/yourPage',
    data: { selectedCompany: $('.companies').val() },
    success: function(result) {
        //delete your tablerows
        $(".classOfTable tr").remove();
        //put the result in your html table e.g.
        $('.classOfTable').append(result);
    },
    dataType: html
});

浏览器将向“ / yourPage？selectedCompany = Google”发送请求，或者要做的就是让此页面仅打印html（甚至更简单的是仅打印表格行（<tr>））。

如果您还有其他疑问，请询问。

Answer 3

我会使用jQuery来做到这一点。

首先，您需要向每个选项标签添加“ id”属性

<option id="option1">
<option id="option2">

依此类推...然后使用jQuery：

$('<option>').change(function() {
   var id=$(this).attr('id');
...save data here (i.e: with ajax $.post(url, { selected_id: id}, callback }
});