Как сделать, чтобы выбранное значение в списке заменяло собой список?

Question

[0x7000]

Как сделать, чтобы выбранное значение в списке заменяло собой список?

$('#mySelect').on('change', function() {
      $(this).closest('tr').find('td')
        .text($(this).val());
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <table>
      <tr>
        <td>test</td> <!-- Нужная ячейка -->
        <td>test2</td>
      </tr>

      <tr>
        <td>
          <select id="mySelect">
            <option>1</option>";
            <option>2</option>";
          </select>
        </td>
        <td>test
        </td>
        </tr>
    </table>

Comments

[0xD34F]

<td>test</td> <!-- Нужная ячейка -->

Нужная для чего?

[0x7000]

0xD34F, в эту ячейку скрипт добавляет выбранное значение. мне же нужно заменить саму кнопку списка после выбранного значения.

Answer 1

[0xD34F]

$('table').on('change', 'select', ({ target: t }) => {

  $(t).replaceWith(t.value);

  // или

  $(t).parent().text(t.value);
});

или

document.querySelector('table').addEventListener('change', ({ target: t }) => {

  if (t.tagName === 'SELECT') {
    t.replaceWith(t.value);
  }

  // или

  if (t instanceof HTMLSelectElement) {
    t.parentNode.textContent = t.value;
  }

  // или

  if (t.nodeName === 'SELECT') {
    t.parentNode.replaceChild(new Text(t.value), t);
  }

  // или

  t.matches('select') && (t.outerHTML = t.value);
});