Advanced Search

Return to Snippet

Revision: 65852
at January 29, 2014 21:22 by apphp-snippets
Initial Code 
<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>
Initial URL 
http://www.apphp.com/index.php?snippet=javascript-converting-text-input-to-select
Initial Description 
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 remove() and append() jQuery methods and the second shows how to perform the same work with replaceWith() method.
Initial Title 
Converting a text input to a select with JavaScript
Initial Tags 
javascript
Initial Language 
JavaScript