如何实现点击表格单元格显示下拉菜单并更新单元格内容？

<table id="mytable">
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-row" data-id="1">
            <td data-column="1">一行文本1</td>
            <td data-column="2">一行文本2</td>
        </tr>
        <tr class="table-row" data-id="2">
            <td data-column="1">二行文本1</td>
            <td data-column="2">二行文本2</td>
        </tr>
        <!-- ... more rows ... -->
    </tbody>
</table>

$('#myTable').on('click', 'td[data-column="1"]', function() {
    let $td = $(this);
    let rowId = $td.closest('tr').data('id');
    let currentValue = $td.text();

    let selectHtml = '<select class="my-select" data-row-id="' + rowId + '">';
    selectHtml += '<option value="0">选项一</option>';
    selectHtml += '<option value="1">选项二</option>';
    selectHtml += '<option value="2">选项三</option>';
    selectHtml += '<option value="3">选项四</option>';
    selectHtml += '</select>';

    $td.html(selectHtml);
    $('.my-select').val(currentValue); // 如果有初始值，设置初始值
    $('.my-select').width($td.width());  // 设置下拉框宽度
});

$('#myTable').on('change', '.my-select', function() {
    let $select = $(this);
    let rowId = $select.data('row-id');
    let selectedValue = $select.val();
    let selectedText = $select.find(':selected').text();

    // 更新单元格内容
    $select.closest('td').text(selectedText);

    // 发送Ajax请求 (记得替换成你的实际URL和数据)
    $.ajax({
        type: 'POST',
        url: '/http/xx.php',
        data: { "userId": rowId, "Sex": selectedValue },
        dataType: "json",
        async: true,
        success: function(response) {
            // 处理Ajax响应
        },
        error: function(error) {
            // 处理Ajax错误
        }
    });
});