使用 JavaScript 将文本输入转换为选择元素
Converting a text input to a select element with JavaScript
我正在托管的电子商务平台上进行一些前端开发。系统会发送文本输入供客户选择要添加到购物车的商品数量,但我更喜欢选择。我无法访问系统在这方面吐出的标记,因此我想使用 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>');
有谁知道为什么这不起作用?选择不应该以与文本输入相同的方式通过表单提交信息吗?
谢谢!
使用 replaceWith
而不是 remove
和 append
。 此外,<select>
上的type
属性是不必要的,<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>');
您尚未设置字段名称。将name='txtQuantity'
添加到选择中。 如果没有 name 属性,字段的值将不会回发到服务器。
此外,不要在选择上设置value='1'
(这不执行任何操作),而是将selected='selected'
添加到第一个选项。 结果与默认选择第一个选项的结果相同。
您可能最终会在带有上述代码的提交按钮之后进行选择。然而,这在另一个答案中已经涵盖。
已经有一个下拉列表/选择列表,并且只想从标签/文本框中添加一个项目,那么您可以尝试:
if ($(textBoxID).val() != '') {
$(dropDownID)
.append($("<option></option>")
.attr('value', ($(textBoxID).val()))
.text($(textBoxID).val())).val($(textBoxID).val())
}
从<select>
中删除type
和value
属性,然后添加省略的name="txtQuantity"
属性。
- WebdriverIO waitForExist()选择元素's选定的选项
- 如何选择元素的第n个子元素
- Angular没有根据模型更新我的选择元素
- jquery使用name from变量按类选择元素
- 如何使用jQuery按数据日期属性选择元素
- 向html选择元素添加选项
- 使用Jquery在相同类型的元素中选择元素
- 他们是如何使用angular/jqLite find()方法按属性名称和值选择元素的?ng conf 2015
- 如何在Angular中清除选择元素中的过滤器
- 使用其中一个元素作为参考点,从Javascript数组中选择元素
- Javascript选择元素到字符串的比较
- Angular始终选择选择元素中的第一个选项
- 使用 jquery .find() 遍历按类和存储属性选择元素
- 通过 id json, jquery 选择元素
- 如何基于另一个已经存在的选择器选择元素
- 禁用多个选择元素中的非“选定”选项,但使用 jquery 的一个除外
- HTML 选择元素的只读等效项
- 在iPad上,如何通过Javascript事件在选择元素上设置focus()而不显示选项
- 单击事件似乎不适用于 IE 中的选择元素
- Angular js,在选择元素上,我想 POST 数据以将其保存在数据库中,然后我想使用 PUT 更新它而无需重新加载