Попытка заменить текст HTML при выборе опции выбора с помощью jQuery

У меня есть класс, содержимое которого мне нужно заменить с помощью select optionи 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>
replaceWith

javascript,jquery,

1

Ответов: 1

1 принят

Когда вы используете replaceWith, он заменяет фактический элемент, поэтому в первый раз он работает, но в следующий раз он не сможет его найти, потому что он был заменен. Вы хотите заменить содержимое элемента, а не самого элемента. Изменение htmlк 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>

JavaScript, JQuery,
Похожие вопросы
Яндекс.Метрика