使用另一个表格单元格的下拉列表填充其他 HTML 表格单元格答案

【问题标题】：Populate other HTML table cells with a dropdown from another Table Cell使用另一个表格单元格的下拉列表填充其他 HTML 表格单元格
【发布时间】：2017-09-03 08:29:28
【问题描述】：

我必须为我的团队创建一个联系人列表以在我们的网站上实施，由于有大量联系人，我希望只有一个带有下拉菜单的表格单元格，一旦单击，它将根据所选内容使用相关信息填充其旁边的其他单元格。

我对 HTML 很陌生，所以我什至不知道如何使下拉菜单起作用。

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover" style="text-align:center;">
    <thead>
      <tr>
        <th>Department</th>
        <th>Division</th>
        <th>Number</th>
        <th>CTI</th>
        <th>Email</th>
      </tr>
    </thead>

    <tbody style="overflow-y:scroll; height:200px;">
      <tr>
        <td class="select">
          <select>
            <option value="department">Department</option>
            <option value="saab">Division</option>
            <option value="number">Number</option>
            <option value="cti">CTI</option>
            <option value="email">Email</option>
          </select>
        </td>
        <td class="select">
          <select>
            <option value="billing">billing</option>
            <option value="retention">retention</option>
            <option value="sales">sales</option>
            <option value="support">support</option>
            <option value="management">management</option>
          </select>
        </td>
        <td>
          Number
        </td>
        <td>
          CTI
        </td>
        <td>
          Email
        </td>
      </tr>

    </tbody>
  </table>
</div>

到目前为止，我在下面得到的答案并不完全符合我的要求。

下面我添加了一张我的表格在 CSS 中的样子，我希望前两个单元格填充部门及其部门。其他单元格将根据前两个的选择自行填充：

【问题讨论】：

标签： html html-table cell

【解决方案1】：

试试这个

   <tr>
        <td>
        <select>        
                <option value="department-1">Department</option>
                <option value="department-2">Department</option>
                <option value="department-3">Department</option>
                <option value="department-4">Department</option>
                <option value="department-5">Department</option>
        </select>
        </td>   

        <td>
        <select>        
                <option value="division-1">Division</option>
                <option value="division-2">Division</option>
                <option value="division-3">Division</option>
                <option value="division-4">Division</option>
                <option value="division-5">Division</option>
        </select>
        </td> 
    </tr>

然后继续添加

【讨论】：

我在上面更新了我的代码，但它并没有完全按照您的回复做我想要的。我想让下拉 1 选择部门，下拉 2 将填充这些部门可用的区域，一旦两者都被选中，它将使用相关信息填充其他表格单元格。
我已经更新了代码。这更符合您的要求吗？你可以编辑你想要的部门名称
我得到了关于添加下拉列表的部分，但我想看到的是第一个显示所有部门的部分。一旦你选择了你想要的，第二个下拉菜单将允许你选择区域。一旦您选择了所有这些，其他表格单元格将根据两个下拉列表填充信息。