2017-04-07 166 views
0

我必須爲我的團隊創建聯繫人列表才能在我們的網站上實施,並且由於存在大量聯繫人,我希望只有一個表格單元格有一個下拉菜單,並且一旦點擊了它,就會根據選擇的信息填充旁邊的其他單元格。從其他表格單元格填充其他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

回答

0

嘗試這個

<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

我已經得到了關於添加下拉菜單的部分,但是我想看到的是顯示所有部門的第一個部分。一旦你選擇了你想要的,第二個下拉菜單將允許你選擇該區域。一旦你選擇了所有的選項,其他表格單元將根據兩個下拉列表填充信息。 –

相關問題