尝试使用jQuery更改select选项时替换HTML文本

Question

我有一个类需要通过HTML jQuery和option替换的内容。奇怪的是，替换内容的$("#selectTable1 .charts-provinsi").on('change', function(e) { var tableName = $('#selectTable1 .charts-provinsi').find(":selected").text(); $("#sourceTable1 .table-name").replaceWith(tableName); e.preventDefault(); });代码仅在第一次尝试时有效。如果我尝试选择不同的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="selectTable1"> <p><em>Table 1</em></p> <div class="form-group"> <select class="charts-provinsi form-control selectpicker" data-live-search="true" title="Pilih Daerah"> <option class="lvl1" value="1" name="SG" selected="selected">Singapore</option> <option class="lvl1" value="2" name="ID">Indonesia</option> <option class="lvl2" value="3" name="MY">Malaysia</option> <option class="lvl1" value="4" name="PH">Philippines</option> </select> </div> <div id="sourceTable1"> <h4 class="h4 table-title"> <strong>Table 1</strong> <span class="table-name">Singapore</span> </h4> <table id="dataTable" class="table dataTable"> <tr class="year"> <td></td> <th>2010</th> <th>2011</th> <th>2012</th> <th>2013</th> <th>2014</th> <th>2015</th> </tr> <tr class="row1"> <th class="row-title"> <a href="#" title="Hapus data" class="glyphicon glyphicon-remove fa-lg row-delete"></a> (SG) Row 1</th> <td>40355</td> <td>39544</td> <td>30280</td> <td>37123</td> <td>39129</td> <td>41234</td> </tr> <tr class="row2"> <th class="row-title"> <a href="#" title="Hapus data" class="glyphicon glyphicon-remove fa-lg row-delete"></a> (SG) Row 2</th> <td>32760</td> <td>37700</td> <td>39000</td> <td>35023</td> <td>39234</td> <td>37230</td> </tr> <tr class="row3"> <th class="row-title"> <a href="#" title="Hapus data" class="glyphicon glyphicon-remove fa-lg row-delete"></a> (SG) Row 3</th> <td>37326</td> <td>37386</td> <td>38000</td> <td>37504</td> <td>38120</td> <td>39102</td> </tr> </table> </div>，它将无效。

这是我的代码：

{{1}}

{{1}}

Answer 1

当你使用replaceWith时，它正在替换实际的元素，所以它第一次工作，但下次因为被替换而无法找到它。您想要替换元素的内容，而不是元素本身。将replaceWith更改为html即可运行：

$("#selectTable1 .charts-provinsi").on('change', function(e) {
  var tableName = $('#selectTable1 .charts-provinsi').find(":selected").text();

  $("#sourceTable1 .table-name").html(tableName);

  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectTable1">
  <p><em>Table 1</em></p>

  <div class="form-group">
    <select class="charts-provinsi form-control selectpicker" data-live-search="true" title="Pilih Daerah">
                    <option class="lvl1" value="1" name="SG" selected="selected">Singapore</option>
                    <option class="lvl1" value="2" name="ID">Indonesia</option>
                    <option class="lvl2" value="3" name="MY">Malaysia</option>
                    <option class="lvl1" value="4" name="PH">Philippines</option>
                  </select>
  </div>



  <div id="sourceTable1">
    <h4 class="h4 table-title">
      <strong>Table 1</strong> <span class="table-name">Singapore</span>
    </h4>

    <table id="dataTable" class="table dataTable">
      <tr class="year">
        <td></td>
        <th>2010</th>
        <th>2011</th>
        <th>2012</th>
        <th>2013</th>
        <th>2014</th>
        <th>2015</th>
      </tr>
      <tr class="row1">
        <th class="row-title">
          <a href="#" title="Hapus data" class="glyphicon glyphicon-remove fa-lg row-delete"></a> (SG) Row 1</th>
        <td>40355</td>
        <td>39544</td>
        <td>30280</td>
        <td>37123</td>
        <td>39129</td>
        <td>41234</td>
      </tr>
      <tr class="row2">
        <th class="row-title">
          <a href="#" title="Hapus data" class="glyphicon glyphicon-remove fa-lg row-delete"></a> (SG) Row 2</th>
        <td>32760</td>
        <td>37700</td>
        <td>39000</td>
        <td>35023</td>
        <td>39234</td>
        <td>37230</td>
      </tr>
      <tr class="row3">
        <th class="row-title">
          <a href="#" title="Hapus data" class="glyphicon glyphicon-remove fa-lg row-delete"></a> (SG) Row 3</th>
        <td>37326</td>
        <td>37386</td>
        <td>38000</td>
        <td>37504</td>
        <td>38120</td>
        <td>39102</td>
      </tr>
    </table>
  </div>