从其他表格单元格填充其他HTML表格单元格

问题描述:

我必须为我的团队创建联系人列表才能在我们的网站上实施,并且由于存在大量联系人,我希望只有一个表格单元格有一个下拉菜单,并且一旦点击了它,就会根据选择的信息填充旁边的其他单元格。从其他表格单元格填充其他HTML表格单元格

我对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的图片,我希望前两个单元格填充部门和其部门。其他单元将根据前两次的选择填充自己:

Contacts Table Idea

尝试这个

<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> 

而就在不断增加

+0

我更新了我上面的代码,但它不是很做你想做的事。我想要下拉菜单1选择部门,下拉菜单2将填充这些部门可用的区域,一旦选定了这两个部门,它将填充其他表格单元格以及相关信息。 –

+0

我更新了代码。这是你想要的更多吗?你可以编辑你想要的部门名称 –

+0

我已经得到了关于添加下拉菜单的部分,但是我想看到的是显示所有部门的第一个部分。一旦你选择了你想要的,第二个下拉菜单将允许你选择该区域。一旦你选择了所有的选项,其他表格单元将根据两个下拉列表填充信息。 –