用select替换表单中的所有输入字段，用jquery保留每个元素的原始name属性

Question

我有一个表单，其中包含如下输入：

<div id="buttons">
<label>Quantity:</label>
<input name="quantity_1"  type="text" value="1" />
<input name="quantity_2"  type="text" value="1" />
<input type="submit" name="Add" value="Add" id="Add" />
</div>

以及一个正在工作的jquery脚本，它将所有这些输入转换为选择：

$('[name^="quantity_"]').replaceWith('<select name="quantity">' +
'<option value="1">1</option>' +
'<option value="2">2</option>' +
'<option value="3">3</option>' +
'<option value="4">4</option>' +
'<option value="5">5</option>' +
'</select>');

但正如您所看到的，它将替换所有属于"的名称；数量；而不是"；quantity_ 1"quantity_ 2"；等等(我没有两个，但有很多(。我可以向这个代码添加什么，使它正常工作？

Answer 1

考虑以下内容。

$(function() {
$('[name^="quantity"]').each(function(i, el) {
$(el).replaceWith("<select name='quantity_" + (i + 1) + "'><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttons">
<label>Quantity:</label>
<input name="quantity_1" type="text" value="1" />
<input name="quantity_2" type="text" value="1" />
<input type="submit" name="Add" value="Add" id="Add" />
</div>

您需要对每个元素执行操作，因此请使用.each()。

查看更多：https://api.jquery.com/each/

Answer 2

所以，是的，非常感谢Twisty，经过一点改动，我终于得到了正确的版本：

$(function() {
$('input[name^="quantity"]').each(function(i, el) {
$(el).replaceWith("<select name='quantity_" + ($(el).attr('name').replace("quantity_", "")) + "'><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>");
});
});

希望它将来也能帮助到别人！