JQuery заменить ввод выбором, используя replaceWith

Question

У меня есть несколько входов с существующим значением. Я хотел бы заменить входные данные выбором, используя те же параметры, но сохранив исходное значение.

html:

<span id="span1">
  <input type="text" id="input1" value="1" >
</span>
<span id="span2">
  <input type="text" id="input2" value="2" >
</span>
<span id="span3">
  <input type="text" id="input3" value="3" >
</span>

Это то, что я пробовал сейчас:

var inputs = ['input1', 'input2', 'input3'];

$.each(inputs, function(key, inputname) { 

  $('#'+inputname)
    .replaceWith('<select id="'+inputname+'" name="'+inputname+'">' +
          '<option value="1">0</option>' +
          '<option value="1">1</option>' +
          '<option value="2">2</option>' +
          '<option value="3">3</option>' +
        '</select>'); 
    $('#'+inputname).val("2");
});

Таким образом, он работает для создания одинакового пользовательского выбора для каждого входа, и я могу установить фиксированное значение, но я хотел бы получить исходное значение для каждого входа.

Возможно ли это?

Заранее спасибо за помощь

Answer 1

Вы должны были бы получить значение элемента перед выполнением замены.

В качестве альтернативы я написал упрощенную версию, использующую собственный неявный цикл, который будет делать replaceWith. Я также добавил дополнительный метод, чтобы выбрать предыдущее значение в новом выборе, если это необходимо.

$('#input1, #input2, #input3').replaceWith(function(){
  const isSelected = (value) => {
    return value === this.value ? 'selected' : '';
  };
  
  return `
    <select id="${this.id}" name="${this.name}">
      <option value="1">0</option>
      <option value="1" ${isSelected('1')}>1</option>
      <option value="2" ${isSelected('2')}>2</option>
      <option value="3" ${isSelected('3')}>3</option>
    </select>
  `;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="span1">
  <input type="text" id="input1" value="1" >
</span>
<span id="span2">
  <input type="text" id="input2" value="2" >
</span>
<span id="span3">
  <input type="text" id="input3" value="3" >
</span>

Answer 2

Вам необходимо прочитать значение, прежде чем заменить его.

var inputs = ['input1', 'input2', 'input3'];

$.each(inputs, function(key, inputname) {
  var inp = $('#' + inputname)
  var val = inp.val()
  var sel = $('<select id="' + inputname + '" name="' + inputname + '">' +
    '<option value="0">0</option>' +
    '<option value="1">1</option>' +
    '<option value="2">2</option>' +
    '<option value="3">3</option>' +
    '</select>')
  sel.val(val);
  inp.replaceWith(sel);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="span1">
  <input type="text" id="input1" value="1" >
</span>
<span id="span2">
  <input type="text" id="input2" value="2" >
</span>
<span id="span3">
  <input type="text" id="input3" value="3" >
</span>