Add/Remove new Select w/ Options if Current Select w/ Options is selected

Ok I would like to be able to add another select box with the same options if the previous select box option is selected. If it's de-selected then remove the last select box w/ options.

Here is what I'm trying, I can add/remove another select box with the first select box but I can't with the newly created select box.

var counter = 1; // as we already have the first dropdown

function populate(selector) {
  $(selector)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

populate('#select_options_1');

$("#select_options_" + counter).change( function() {
 开发者_运维问答   var addNewSelect = $(this).val() != '';

    if(addNewSelect) {  
        counter++;      
        var newSelectOption = $(document.createElement('select')).attr("id", 'select_options_' + counter);

        newSelectOption.html('<option value="">Please Select an Option</option>' +
                             '<option value="foo">foo</option>' +
                             '<option value="bar">bar</option>');

        newSelectOption.appendTo("#select_option_groups");

    } else {
        $('#select_options_' + counter).remove();
        if(counter > 1) {
          counter--;
        } 
    }
    alert('Add New Select? ' + addNewSelect + ' Counter ' + counter);
});

The HTML

<div name="select_option_groups" id="select_option_groups">
    <select name="select_options_1" id="select_options_1">
        <option value="">Please Select an Option</option>
    </select>
</div>

Example Code from above: http://jsfiddle.net/RaHhY/31/

Here's a shorter solution, not sure if you're interested:

$(function(){
    var counter = 2;
    var onChange = function(e){
        val = $(':selected',this).val() || '';
        if (val != ''){
            // they may be able to toggle between valid options, too.
            // let's avoid that using a class we can apply
            var c = 'alreadyMadeASelection';
            if ($(this).hasClass(c))
                return;
            // now take the current select and clone it, then rename it
            var newSelect = $(this)
                .clone()
                .attr('name','select_options_'+counter++)
                .appendTo($(this).parent())
                .change(onChange);
            $(this).addClass(c);
        } else {
            var id = $(this).attr('name').match(/\d+$/), parent = $(this).parent();
            $(this).remove();

            // re-order the counter (we don't want missing numbers in the middle)
            $('select',parent).each(function(){
                var iid = $(this).attr('name').match(/\d+$/);
                if (iid>id)
                    $(this).attr('name','select_options_'+(iid-1));
            });
            counter--;
        }
    };
    $('#select_option_groups select').change(onChange);
});

Given the following:

<div id="select_option_groups">
    <select name="select_options_1">
        <option value="" selected>Please select an option</option>
        <option value="foo">Foo</option>
        <option value="bar">Bar</option>
    </select>
</div>

Demo

Update

So much for shorter code :giggle:. Anyways, this is an update with a few basic improvements:

1. It will use the same select list HTML code (maintainable my only making a change to the HTML select, not the HTML and the javascript.
2. You can delete options at the end of the list, middle, beginning--it doesn't matter. The list will automatically re-order itself and decrement the counter.
3. An item is able to be modified after its initial selection without it having any effect on the list. (previously, if you selected foo then went back and selected bar it would add a new entry even though it wasn't a "new" value (just a modified one))

Look at this...

http://jsfiddle.net/RaHhY/34/

You were setting a change handler for the id and not for each select that gets created.