Trying to replace a HTML text when the select option is changed, with jQuery

Question

I have a class which content I need to replace through HTML select and option. Oddly the jQuery code to replace the content only works in first try. It won't work if I try to choose different option.

Here is my code:

$("#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>

Answer 1

When you use replaceWith, it is replacing the actual element, so the first time it works, but the next time it cannot find it because it was replaced. You want to replace the content of the element, not the element itself. Change replaceWith to html and it will work:

$("#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>