转换文本输入与JavaScript中选择元素(Converting a text input to

我在做一个托管电子商务平台的一些前端开发。 该系统发送一个文本输入供客户选择他们想要添加到自己车中的物品的数量，但我宁愿一个选择。 我没有进入系统吐出了这方面的标记，所以我想用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:

您还没有设置字段名。 添加name='txtQuantity'的选择。 没有名字的属性字段的值将不会回发到服务器。

还而不是设置value='1'上的选择（这是不执行任何操作），加selected='selected'到第一个选项。 其结果是一样的默认第一个选项被选择。

您大概结束了选择与上面的代码提交按钮后。 然而已经覆盖另一个答案。

Answer 2:

使用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 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())
}

文章来源: Converting a text input to a select element with JavaScript