How to add option to select list using jQuery

jQuery provides some interesting methods that would help add items (options) in the select element. To add an option to a select box, this will add an option to the end of the option list.

HTML Code

<select id="paid_by" name="paid_by">
    <option value="">Select Payment Method</option>
    <option value="1">Cash</option>
    <option value="3">Credit cards</option>
    <option value="5">Cheque</option>
    <option value="6">Debit / Credit Sales </option>
    <option value="7">Gift Card</option>
    <option value="8">Deposit</option>
    <option value="10">Free</option>
    <option value="11">Points</option>
    <option value="13">Dialog Cards </option>
    <option value="14">Visa / Master</option>
    <option value="15">Amex</option>
    <option value="16">P B Visa</option>
    <option value="17">vouchers</option>
    <option value="19">Excess</option>
</select>

jQuery Code

$("#paid_by").append('<option value="9">Shortage Account</option>');

Output

<select id="paid_by" name="paid_by">
    <option value="">Select Payment Method</option>
    <option value="1">Cash</option>
    <option value="3">Credit cards</option>
    <option value="5">Cheque</option>
    <option value="6">Debit / Credit Sales </option>
    <option value="7">Gift Card</option>
    <option value="8">Deposit</option>
    <option value="10">Free</option>
    <option value="11">Points</option>
    <option value="13">Dialog Cards </option>
    <option value="14">Visa / Master</option>
    <option value="15">Amex</option>
    <option value="16">P B Visa</option>
    <option value="17">vouchers</option>
    <option value="19">Excess</option>
    <option value="9">Shortage Account</option>
</select>

Leave a Reply

Your email address will not be published. Required fields are marked *