title: Converting a text input to a select element with JavaScript
body: <p>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 <em>input</em> to a <em>select</em> element.</p>
  
  <p>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.</p>
  
  <p>Here's the native markup:</p>
  
  <pre><code>&lt;div id="buy-buttons"&gt;
    &lt;label&gt;Quantity:&lt;/label&gt;
    &lt;input name="txtQuantity" type="text" value="1" id="txtQuantity" class="ProductDetailsQuantityTextBox"&gt;
    &lt;input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" class="ProductDetailsAddToCartButton ThemeButton AddToCartThemeButton ProductDetailsAddToCartThemeButton"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the jQuery I'm running to update my markup. </p>
  
  <pre><code> $("#txtQuantity").remove();
   $("#buy-buttons").append('&lt;select id="txtQuantity" type="text" value="1" class="ProductDetailsQuantityTextBox"&gt;&lt;/select&gt;');
   $("#txtQuantity").append('&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;');
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks!</p>