在可点击的表格行上创建下拉列表

Question

我想在用户点击表格行后创建一个下拉列表。如何使用bootstrap和JavaScript执行此操作？

这是我的表

Answer 1

＆＃13;

＆＃13;

jQuery(document).ready(function($) {
    $(".clickable-row").click(function(e) {
        if(e.target.id != "listItems"){
          $(this).find("#listItems").toggle();
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

</div>
<table>
    <tr class='clickable-row' data-href='url://'>
        <td>1</td> 
        <td>ABC</td> 
        <td>123456789</td>
        <td>
          <select id="listItems">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>        
        </td>
    </tr>
    <tr class='clickable-row' data-href='url://'>
        <td>2</td> 
        <td>BCD</td> 
        <td>123456789</td>
        <td>
          <select id="listItems">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>        
        </td>
    </tr>    
</table>

＆＃13;

＆＃13;

＆＃13;