如何获取表格中动态创建的select下拉框选中选项的value值

问题根源 #

• 原有取值逻辑错误：直接匹配所有option[name="parRatingOption"]元素，默认返回第一个匹配项的value，和实际选中状态无关，因此始终返回第一个选项的值
• jQuery对象调用错误：$()返回的是jQuery封装对象，不能直接使用原生DOM的.value属性，需使用jQuery提供的.val()方法，或先转为原生DOM对象再调用.value

正确取值代码（最优写法） #

直接获取下拉框<select>元素的取值即可，jQuery的.val()方法对下拉框元素会直接返回选中项的value属性值：

var parRating = $(this).parents('tr:first').find('select[name="parRating"]').val();
alert("parRating: " + parRating);
var startDate = $(this).parents('tr:first').find('input[name="startDate"]').val();

可选写法（通过选中option获取） #

如果需要通过option元素获取，要添加:selected选择器匹配选中项：

// 用jQuery方法取值
var parRating = $(this).parents('tr:first').find('option[name="parRatingOption"]:selected').val();
// 转原生DOM对象取值
var parRating = $(this).parents('tr:first').find('option[name="parRatingOption"]:selected')[0].value;

额外优化建议 #

• <option>元素不需要设置name属性，表单提交时name属性仅作用于<select>元素，可删除冗余的name='parRatingOption'属性
• 循环创建option时，如果paraArray是数组的长度属性，判断条件建议改为i < paraArray，避免出现数组下标越界问题

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