Converting a Text Input to a Select with JavaScript
Sometimes you need the page dynamically changes a texbox with a dropdown box.
On the example below we show you how to perform this work. The first way demonstrates
how to do this with
[View All Snippets]
remove()
and append()
jQuery methods and
the second shows how to perform the same work with replaceWith()
method.
[View All Snippets]
Show Plain Text »
- <div id="buy-buttons">
- <label>Quantity:</label>
- <input name="txtQuantity" id="txtQuantity" type="text" value="1" />
- <input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" />
- </div>
- <script>
- // First way:
- $("#txtQuantity").remove();
- $("#buy-buttons").append('<select name="txtQuantity" id="txtQuantity"></select>');
- $("#txtQuantity").append('<option value="1" selected="selected">1</option>' +
- '<option value="2">2</option>' +
- '<option value="3">3</option>' +
- '<option value="4">4</option>' +
- '<option value="5">5</option>');
- // Second way:
- $("#txtQuantity")
- .replaceWith('<select name="txtQuantity" id="txtQuantity">' +
- '<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>');
- </script>