如何更改子元素的文本？

Question

我想更改由数据属性选择的子元素的文本：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="productdetails" data-product_id="91"><td class="status_result"><span class="label label-primary">in process </span></td>
</tr>


<select class="service" data-id="91">
      <option selected="">in process</option>
      <option>done</option>
</select>

但是文本没有改变...

Answer 1

你的HTML无效，<table>外不能有<tr>和<td>。当您修复 HTML 代码时，代码会工作。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="productdetails" data-product_id="91">
    <td class="status_result"><span class="label label-primary">in process </span></td>
  </tr>
</table>

<select class="service" data-id="91">
      <option selected="">in process</option>
      <option>done</option>
</select>

Answer 2

试试这个：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="productdetails" data-product_id="91">
    <td class="status_result"><span class="label label-primary">in process </span></td>
  </tr>
</table>

<select class="service" data-id="91">
      <option selected="">in process</option>
      <option>done</option>
</select>

如何更改子元素的文本？

How can I change the text of a child element?

jquery

select

onchange

custom-data-attribute