19

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

我使用 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>');

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

谢谢！

4

4 回答 4

38

使用和replaceWith代替。上的属性也是不必要的，节点应该在. 这是关于- http://api.jquery.com/replaceWith/的文档。removeappendtype<select><option><select>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>');
于 2012-06-23T17:51:15.527 回答
6

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

另外，不要value='1'在选择上进行设置（不做任何事情），而是添加selected='selected'到第一个选项。结果与默认情况下选择第一个选项相同。

您可能会在使用上述代码的提交按钮后选择选择。但是，这已在另一个答案中涵盖。

于 2012-06-23T17:53:01.120 回答
1

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

 if ($(textBoxID).val() != '') {
                $(dropDownID)
                    .append($("<option></option>")
                        .attr('value', ($(textBoxID).val()))
                            .text($(textBoxID).val())).val($(textBoxID).val())
}
于 2012-06-23T18:15:17.840 回答
0

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

于 2012-06-23T17:51:22.900 回答