php - 使用图像映射和 html 选择元素从数据库检索经销商信息

Question

我有一个 php 页面 Dealers.php，其中包含 html 表中的所有经销商列表，但我想对页面进行一些更改，并根据美国州名称( map 位于 http://i.imgur.com/HJ3H8sw.png )输入显示经销商信息html 图像映射并选择选项。目前，我可以从具有用户类别的数据库中获取所有活跃(已批准)经销商信息:

public function getActiveUsers()
{

    $sql = "SELECT * FROM " . self::uTable
    . "\n WHERE active = 'y'" 
    . "\n ORDER BY username";
    $row = self::$db->fetch_all($sql);

    return ($row) ? $row : 0;
}

并使用 foreach 循环在前端显示所有内容:

<?php $data = $user->getActiveUsers(); ?>

<?php foreach ($data as $row):?>
    <?php echo $row->name;?>
    <?php echo $row->address;?>
    <?php echo $row->city;?>
    <?php echo $row->state;?>
    <?php echo $row->zip;?>
    <?php echo $row->website;?>
<?php endforeach;?>

<?php unset($row);?>

但我只想在单击图像 map 中的状态名称之一或从选择选项中选择状态之一后输出结果。我怎样才能完成它并以 HTML 表格格式显示结果？

输入选项:

<img src="assets\images\USA-States-Map.png" alt="USA Map" usemap="#USA-States-Map" style="border-style:none" />

<map id="USA-States-Map" name="USA-States-Map">
    <area shape="poly" alt="WYOMING" coords="210,119,208,137,205,150,203,164,202,177,200,185,207,187,231,190,258,193,276,195,289,195,292,163,293,142,294,130,294,127,280,127,261,125,242,123,220,120" title="WYOMING" onMouseOver="WYOMING" />

    <area shape="poly" alt="RHODE_ISLAND" coords="705,150,705,147,703,143,703,141,705,140,706,140,707,141,708,143,709,146,709,148,708,150,705,152" title="RHODE_ISLAND" onMouseOver="RHODE_ISLAND" />
</map>

<select name="state">
    <option value="WYOMING">WYOMING</option>
    <option value="RHODE_ISLAND">RHODE ISLAND</option>
</select>

输出格式:

<table class="table">
    <thead>
      <tr>
        <th class="header">Name</th>
        <th class="header">Address</th>
        <th class="header">City</th>
        <th class="header">State</th>
        <th class="header">Zip</th>
        <th class="header">Website</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

Answer 1

您可能想要使用选择框的 onchange 事件并调用 getActiveUsers 并将表单变量传递给它......如下所示:

<select class="field" name="state" onchange="getActiveUsers(this.form)">