Создать выпадающий список строк таблицы, на которую можно кликнуть

Question

Я хочу создать раскрывающийся список после того, как пользователь щелкнет строку таблицы. Как я могу это сделать с помощью начальной загрузки и JavaScript?

Вот моя таблица

Answer 1

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

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