使用 JavaScript 将文本输入转换为选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11171685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting a text input to a select element with JavaScript
提问by John
I'm doing some front end development on a hosted e-commerce platform. The system sends a text input for the customer to choose the quantity of items they want to add to their cart, but I would prefer a select. I don't have access to the markup the system spits out in this regard, so I'd like to use JavaScript to change the text inputto a selectelement.
我正在托管电子商务平台上进行一些前端开发。系统会发送一个文本输入，让客户选择他们想要添加到购物车的商品数量，但我更喜欢选择。我无权访问系统在这方面吐出的标记，因此我想使用 JavaScript 将文本输入更改为选择元素。
I used jQuery to remove the select and duplicate the input element with a select with the right choices, but when I try to add something to my cart, only one item is added, regardless of the choice in the select.
我使用 jQuery 删除选择并使用具有正确选择的选择复制输入元素，但是当我尝试向购物车添加某些内容时，无论选择中的选择如何，只会添加一项。
Here's the native markup:
这是原生标记：
<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>
Here's the jQuery I'm running to update my markup.
这是我正在运行以更新我的标记的 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>');
Does anyone know why this isn't working? Shouldn't the select be submitting the information to through the form in the same way as the text input?
有谁知道为什么这不起作用？选择不应该以与文本输入相同的方式通过表单提交信息吗？
Thanks!
谢谢！
采纳答案by James Gaunt
You haven't set the field name. Add name='txtQuantity'to the select. Without a name attribute the value of the field will not get posted back to the server.
您尚未设置字段名称。添加name='txtQuantity'到选择中。如果没有 name 属性，该字段的值将不会被回发到服务器。
Also rather than setting value='1'on the select (which isn't doing anything), add selected='selected'to the first option. The result is the same as by default the first option is selected.
另外，不是value='1'在选择上设置（它没有做任何事情），而是添加selected='selected'到第一个选项。结果与默认情况下选择第一个选项相同。
You are presumably ending up with the select after the submit button with the above code. However that has been covered in another answer.
您可能会在带有上述代码的提交按钮之后选择选择。然而，这已在另一个答案中有所涉及。
回答by TJ VanToll
Use replaceWithinstead of removeand append. Also the typeattribute on the <select>is unnecessary and the <option>nodes should be within the <select>. Here's the docs on replaceWith- http://api.jquery.com/replaceWith/.
使用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>');
回答by foo-baar
If you already have an dropdown/select list and you just want to add an item to it from a label/textbox then you can try this :
如果您已经有一个下拉/选择列表，并且只想从标签/文本框中向其中添加一个项目，那么您可以尝试以下操作：
if ($(textBoxID).val() != '') {
$(dropDownID)
.append($("<option></option>")
.attr('value', ($(textBoxID).val()))
.text($(textBoxID).val())).val($(textBoxID).val())
}
回答by Niet the Dark Absol
Remove the typeand valueattributes from the <select>, and add the name="txtQuantity"attribute that you left out.
从 中删除type和value属性<select>，并添加name="txtQuantity"您遗漏的属性。
