Converting a text input to a select element with JavaScript

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.


Use replaceWith instead of remove and append. Also the type attribute 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/.

$("#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>');