使用jQuery无法获取动态新增行中select控件的数据求助

嘿，我瞅出来啦——你点击+ Add More按钮添加新行时，下拉选框根本没正常渲染出来，对吧？这问题出在你生成新行的代码里，犯了个小错误：HTML里的下拉选择框是<select>标签，不是<input type='select'>，这写法完全不对，浏览器根本识别不了！

第一步：修正新增行的Select标签写法 #

你原来写的这段代码是错的：

data +="<td><input type='select' id='first_name"+i+"' name='first_name[]'/></td>"

得改成标准的<select>标签，还要把原始下拉框里的选项也复制过去，不然新的下拉框是空的。我给你优化下代码，还能避免重复写一堆选项：

// 先把原始下拉框的选项缓存起来，省得每次都重复写
var i=2;
var originalSelectOptions = $("#first_name").html();

$(".addmore").on('click',function(){
    var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".</td>";
    // 生成正确的select标签，带上缓存的选项
    data += `<td><select id='first_name${i}' name='first_name[]' class="form-group">${originalSelectOptions}</select></td>`;
    data += "<td><input type='text' id='last_name"+i+"' name='last_name[]'/></td></tr>";
    $('table').append(data);
    i++;
});

第二步：新增单选按钮的处理（针对你后来的更新） #

如果你要在新行里加YES/NO的单选按钮，记得给每组单选按钮设置唯一的name属性，不然不同行的单选按钮会互相干扰。比如可以这样写：

// 在生成新行的代码里加一个td放单选按钮
data += `<td>
    <input type="radio" name="yes_no[${i}]" value="yes"> YES
    <input type="radio" name="yes_no[${i}]" value="no"> NO
</td>`;

这里用yes_no[${i}]作为name，每一行的单选按钮组都是独立的，不会串味。

怎么获取所有Select的数据？ #

不管是前端还是后端，获取数据都很简单：

• 后端：因为所有下拉框的name都是first_name[]，直接通过这个数组名就能拿到所有选中的值（比如PHP里用$_POST['first_name']）。
• 前端：用jQuery遍历所有下拉框就能拿到每一个的选中值：

$("select[name='first_name[]']").each(function(){
    console.log("当前下拉框选中值：", $(this).val());
    console.log("当前下拉框选中文本：", $(this).find("option:selected").text());
});

这样改完，你的添加按钮就能正常生成带下拉框的新行，数据也能正常获取啦！

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