JQuery 使用 replaceWith 将输入替换为 select

Question

我有一些具有现有价值的输入。 我想用具有相同选项但保留原始值的 select 替换输入。

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

因此，它可以为每个输入构建相同的自定义 select，我可以设置一个固定值，但我想检索每个输入的原始值。

可能吗？

在此先感谢您的帮助

Answer 1

在进行替换之前，您必须从元素中获取值。

作为替代方案，我使用replaceWith将执行的本机隐式循环编写了一个简化版本。 如果需要，我还向 select 中的新 select 中的先前值添加了一个额外的方法。

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