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


Load an html table from a mysql database when an onChange event is triggered from a select tag

所以,这是交易。我有一个要填充的html表。具体来说,第一行是用mysql数据库中的元素填充的。确切地说,该表是一份关于手机的调查问卷。第一行是从数据库中加载手机名称的标题。还有一个选择标签,其中有公司名称作为选项。我需要在选择标签上触发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>";
}
?>

像这样的东西。(重载PageWithNewElements()和selectedValue只是目前的一个想法)

将值保存在隐藏的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'];
}

看看这是否有效!!!

最好的选择是使用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>)。

如果您还有任何问题,请提问。

我会使用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 }
});