使用JavaScript将文本输入转换为选择元素 [英] Converting a text input to a select element with JavaScript

问题描述

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

我使用jQuery删除了select并使用具有正确选择的select复制了输入元素，但是当我尝试向购物车中添加内容时，无论选择中的选择如何，都只会添加一项. >

这是本地标记:

<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>');

有人知道为什么这行不通吗?选择者不应该以与文本输入相同的方式通过表格提交信息吗?

谢谢！

解决方案

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

也不要在选择项上设置value='1'(这没有做任何事情)，而是将selected='selected'添加到第一个选项.结果与默认情况下第一个选项相同.

您可能会在上面的代码的提交"按钮之后以select结束.但是，另一个答案已经涵盖了这一点.

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 input to a select element.

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.

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.

 $("#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!

解决方案

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.

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.

You are presumably ending up with the select after the submit button with the above code. However that has been covered in another answer.

这篇关于使用JavaScript将文本输入转换为选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！