无法获取td内select标签选中选项值，总是返回所有选项文本如何解决

当前写法是直接提取td节点的纯文本内容，会把该td内所有option标签的文本全部拼接返回，不会自动过滤未选中的选项，所以才会拿到完整的Select Discount 0.3 0.2内容。另外循环渲染的select重复使用相同iddiscount，也违反DOM规范，会导致后续选择器匹配异常。

1. 调整表格渲染的select代码 #

给select添加专属class，去掉重复id，同时给option补充value属性保证取值稳定：

<select class="discount-select" name="discount">
  <option value="" disabled selected>Select Discount</option>
  <option value="0.3">0.3</option>
  <option value="0.2">0.2</option>
</select>

2. 修改jQuery取值逻辑 #

不要从td的文本数组里拿折扣值，单独匹配当前行内select的选中值：

$(document).ready(function() {
  $('.btnapplydiscount').on('click', function() {
    $('#applydiscountmodal').modal('show');
    $tr = $(this).closest('tr');
    var data = $tr.children("td").map(function(){
      return $(this).text();
    }).get();
    console.log(data);
    $('#apply_discount').val(data[0]);
    // 单独获取当前行select的选中值
    var selectedDiscount = $tr.find('.discount-select').val();
    $('#value_discount').val(selectedDiscount);
  });
});

修改后value_discount会自动匹配用户选中的折扣值，如果用户未选择则返回空字符串，符合预期逻辑。

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