Question

I want to be able to allow users to add their own options on an HTML select dropdown. I have most of the code written except for the part where it takes the value and create an “option” under the select menu.

HTML

<li id="add_1_parent">
    <div>
        <select width="100" class="add_select add_referral">
            <option value="">Incorporation</option>
            <option value="">Corporation</option>
            <option value="">Limited Liability Corporation</option>
            <option value="">Sole Proprietor</option>
        </select>
        <a href="#" id="add_1_child">Add</a>
    </div>    
</li>

JS

$(document).ready(function() {
    $('#add_1_child').click(function() {
        $('#add_1_parent').append('<input id="add_1_foster_add" class="add_input" type="text" size="50" class="" value="" maxlength="255"/><a href="#" id="add_1_foster_child">Add</a>');
    });
    $('#add_1_foster').click(function() {
        // Add the value to the select HTML here..?
    });
});

http://jsfiddle.net/HWRWv/

When you click the "Add" button, it needs to show a text box.

When you click the second add as defined by "add_1_foster_child" it needs to take the value out of the input, turn it into an <option> under the select menu.

What I don’t know how to do is to grab the value from the input and put it into the select menu.

Answer 1

I’m guessing this is what you’re after :

$(document).ready(function() {
    $('#add_1_child').on('click', function() {
        var html = '<div class="add_container"><input class="add_input" type="text" size="50" maxlength="255"/><a href="#" class="add_link">Add</a></div>';
        $('#add_1_parent').append(html);
    });

    $('#add_1_parent').on('click', '.add_link',function() {
        var option = $('<option value="">'+$(this).prev('.add_input').val()+'</option>');
        $('.add_select').append(option);
        $('.add_container').remove(); //removes the add input after submission, optional ?
    });
});​

FIDDLE