将表单中的所有输入字段替换为 select - 将每个元素的原始名称属性保留为 jquery

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

希望对以后的人有所帮助！

将表单中的所有输入字段替换为 select - 将每个元素的原始名称属性保留为 jquery

Replace all input fields in form with select - keeping the original name attribute of each element with jquery

forms

jquery