jquery - 如何放置选择输入 Html 表

Question

我在表格中放置一个选择下拉列表，但是当您单击下拉列表时，无法选择任何项目。

    <table id="tbl_matches" style="width: 100%">
        <thead>
            <tr>
                <th>Product</th>
                <th>NHIS</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Paracetamol</td>
                <td></td>
            </tr>

            <tr>
                <td>Amoxy</td>
                <td></td>
            </tr>

            <tr>
                <td>Nico</td>
                <td></td>
            </tr>

            <tr>
                <td>Cefa</td>
                <td></td>
            </tr>

            <tr>
                <td>Amo</td>
                <td></td>
            </tr>

        </tbody>
    </table>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script>

    let sel = 
        '<select id="product_select">' +
            '<option>Para</option>' +
            '<option>Amozy</option>' +
            '<option>Chloro</option>' +
            '<option>Niph</option>' +
        '</select>'

    $('#tbl_matches tbody').on( 'click', 'tr', function () {

            $('#product_select').parents('td').html($('#product_select option:selected').text());
            curr = $(this).find('td');

            curr.eq(1).html(sel);

        } );

</script>

当我单击下拉时，无法选择选择中的选项。单击表格行时，它会自动关闭下拉列表。

我有它的工作代码here

https://jsfiddle.net/addosmash/d3nL8jwk/1/

标签： jqueryhtml