如何通过JavaScript获取HTML表格中每行下拉列表的选中值

你遇到的核心问题是所有下拉列表使用了同一个ID opttypes——HTML规范里ID必须是唯一的，所以当你用$("#opttypes :selected")时，jQuery只会匹配到页面中第一个带有这个ID的元素，自然只能拿到第一个下拉框的值。

下面是具体的修复步骤：

1. 修改下拉列表的标识（替换重复ID） #

在生成表格行的代码里，把下拉列表的id="opttypes"改成class="opttypes"（class可以重复使用），同时可以保留data-id绑定数据ID方便后续关联：

html += '<td contenteditable class="column_name" data-column_name="link_type" data-id="'+data[count].id+'">' + 
        '<select class="opttypes" data-id="'+data[count].id+'">' + 
        '<option'+ check_selected1(data[count].type)+' value="1"'+' >'+d1+'</option>' + 
        '<option'+ check_selected2(data[count].type)+' value="2"'+' >'+d2+'</option>' + 
        '<option'+ check_selected3(data[count].type)+' value="3"'+' >'+d3+'</option>' + 
        '<option'+ check_selected4(data[count].type)+' value="4"'+' >'+d4+'</option>' + 
        '</select>' + 
        '</td>';

另外，注意原来的<option>的ID（opt1/opt2等）也会重复，建议直接去掉这些ID——因为它们在这里没有实际作用，重复的ID同样会引发潜在的DOM问题。

2. 点击事件中精准获取当前行的下拉值 #

在点击Update按钮时，通过按钮找到它所在的表格行，再在该行内查找对应的下拉列表，这样就能精准获取当前行的选中值：

$(document).on('click', '.edite', function(){
    // 获取当前按钮所在的行，这是定位元素的关键
    var $currentRow = $(this).closest('tr');
    // 从行内元素获取数据ID（也可以保留你原来的split方式，这里提供更简洁的替代方案）
    var id2 = $currentRow.find('.column_name').first().data('id');
    
    // 获取当前行的各列值，用jQuery属性选择器更可靠，避免行号计算错误
    var link_name = $currentRow.find('td[data-column_name="link_name"]').text().trim();
    var link_add = $currentRow.find('td[data-column_name="link_add"]').text().trim();
    // 获取当前行的下拉列表选中值
    var link_type = $currentRow.find('.opttypes').val();
    
    // 这里可以添加你的更新逻辑
    console.log(link_type); // 现在应该能正确打印当前行的选中值了
})

额外优化说明 #

你原来通过行号countRow来获取单元格的方式容易出错（比如表格结构变化、thead行数量改变都会影响行号计算），用closest('tr')和属性选择器来定位元素，代码会更健壮，也更易维护。

内容的提问来源于stack exchange，提问作者Jamal Azizbeigi