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

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).prop('outerText', t.value);

  // или

  $(t).after(t.value).remove();
});

или

const isSelect = el => el.tagName === 'SELECT';
// или
const isSelect = el => el.nodeName === 'SELECT';
// или
const isSelect = el => el.matches('select');
// или
const isSelect = el => el instanceof HTMLSelectElement;

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

    t.replaceWith(t.value);

    // или

    t.parentNode.replaceChild(new Text(t.value), t);

    // или

    t.outerText = t.value;

    // или

    t.after(t.value);
    t.remove();

    // или

    t.parentNode.replaceChildren(...Array.from(
      t.parentNode.childNodes,
      n => n === t ? t.value : n
    ));
  }
});