Question

我正在托管电子商务平台上进行一些前端开发。系统发送文本输入供客户选择他们想要添加到购物车的商品数量，但我更喜欢选择。我无法访问系统在此方面吐出的标记，因此我想使用JavaScript将文本输入更改为 select 元素。< / p>

我使用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'添加到第一个选项。结果与默认情况下相同，即选择第一个选项。

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

Answer 3

从type中删除value和<select>属性，然后添加您遗漏的name="txtQuantity"属性。

Answer 4

如果您已经有一个下拉列表/选择列表，并且您只想从标签/文本框中添加一个项目，那么您可以试试这个：

 if ($(textBoxID).val() != '') {
                $(dropDownID)
                    .append($("<option></option>")
                        .attr('value', ($(textBoxID).val()))
                            .text($(textBoxID).val())).val($(textBoxID).val())
}

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

4 个答案: