如何修改子元素文本？通过data属性选择元素修改文本失效求助

你的代码核心逻辑没问题，但之所以看不到文本变化，是因为你修改的是父元素<td class="status_result">的文本，而实际显示的内容来自它内部的<span>标签——新设置的文本会被原有span覆盖或隐藏，导致视觉上没有变化。

修复方案1：直接修改内部span的文本（保留原有样式） #

这是最直接的修复方式，直接选中status_result下的span元素来更新文本，同时保留label的样式：

$('.service').change(function () { 
  var dataid = $(this).data('id'); 
  var status = $(this).val(); 
  console.log(dataid); 
  // 调整选择器，定位到内部的span
  $(".productdetails[data-product_id='" + dataid + "']").find(".status_result span").text(status); 
}); 

修复方案2：替换整个td内容（支持样式切换） #

如果后续需要根据状态切换不同的标签样式（比如"done"用绿色标签），可以用.html()直接替换整个td的内容：

$('.service').change(function () { 
  var dataid = $(this).data('id'); 
  var status = $(this).val(); 
  // 根据状态匹配对应的标签类
  var labelClass = status === 'done' ? 'label-success' : 'label-primary';
  // 替换整个td的HTML内容
  $(".productdetails[data-product_id='" + dataid + "']").find(".status_result")
    .html(`<span class="label ${labelClass}">${status}</span>`); 
}); 

额外优化建议 #

为了避免DOM未加载完成导致选择器失效，建议把代码包裹在$(document).ready()中：

$(document).ready(function() {
  $('.service').change(function () { 
    var dataid = $(this).data('id'); 
    var status = $(this).val(); 
    $(".productdetails[data-product_id='" + dataid + "']").find(".status_result span").text(status); 
  }); 
});

这样调整后，切换下拉选项时，对应的状态文本就会正常更新了。

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