使用JavaScript将文本输入转换为select元素

Question

我正在托管的电子商务平台上进行一些前端开发.系统发送文本输入供客户选择他们想要添加到购物车的商品数量,但我更喜欢选择.我没有访问系统在这方面吐出的标记,所以我想使用JavaScript将文本输入更改为select元素.

我使用jQuery删除选择并使用具有正确选择的选项复制输入元素,但是当我尝试向我的购物车添加内容时,只添加一个项目,无论选择中的选项如何.

这是本机标记:

<div id="buy-buttons">
  <label>Quantity:</label>
  <input name="txtQuantity" type="text" value="1" id="txtQuantity" class="ProductDetailsQuantityTextBox">
  <input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" class="ProductDetailsAddToCartButton ThemeButton AddToCartThemeButton ProductDetailsAddToCartThemeButton">
</div>

这是我正在运行的jQuery更新我的标记.

 $("#txtQuantity").remove();
 $("#buy-buttons").append('<select id="txtQuantity" type="text" value="1" class="ProductDetailsQuantityTextBox"></select>');
 $("#txtQuantity").append('<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>');

有谁知道为什么这不起作用？选择是否应该以与文本输入相同的方式通过表单提交信息？

谢谢!

Answer 1

使用replaceWith而不是remove和append.此外,该type属性<select>是不必要的,<option>节点应该在<select>.下面是关于文档replaceWith- http://api.jquery.com/replaceWith/.

$("#txtQuantity")
    .replaceWith('<select id="txtQuantity" name="txtQuantity" class="ProductDetailsQuantityTextBox">' +
          '<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>');

Answer 2

您尚未设置字段名称.添加name='txtQuantity'到选择.如果没有name属性,该字段的值将不会回发到服务器.

而不是设置value='1'选择(没有做任何事情),添加selected='selected'到第一个选项.结果与默认情况下相同,即选择第一个选项.

您可能会在提交按钮后使用上面的代码结束选择.然而,另一个答案已经涵盖了这一点.