JQuery replace input by a select using replaceWith

Question

I have a few inputs with existing value. I would like to replace inputs by a select with the same options but retain the original value.

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>

This what I've tried for now:

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");
});

So it work to build the same custom select for each input and I can set a fixed value but I would like to retrieve the original value for each input.

Is it possible?

Thanks in advance for your help

Answer 1

You would have to grab the value off of the element before you do the replace.

As an alternative, I wrote a simplified version using the native implicit looping that replaceWith will do. I also threw in an extra method to select the previous value in the new select, if that is desired.

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

You need to read the value before you replace it.

 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>