Remove selected option from dynamically added selects

Question

I am adding dynamically multiple divs which contain select options and want to remove the option which is selected in first select from the next select box.

Please check the jdfiddle here: http://jsfiddle.net/MSvje/

<div class="center">
    <div class="row-fluid">
        <div class="span3">
            <select class="chosen-select" id="form-field-select-3" data-placeholder="Choose a Country...">
                <option value="">Text</option>
                <option value="AL">Department</option>
                <option value="AK">City</option>
                <option value="AZ">State</option>
                <option value="AR">Country</option>
                <option value="CA">Industry</option>
            </select>
        </div>
    </div>
</div>
<a href="javascript:void(0);" id="search-add"><i class="icon-plus">Add One</i></a>
<br />
<a href="javascript:void(0);"  id="search-remove"><i class="icon-minus">Remove One</i></a>

Js CODE:

jQuery(function($) {
        $("#search-add").click(function () {
            if( ($('.center .row-fluid').length+1) > 5) {
                alert("Only 5  allowed");
                return false;
            }
            var id = ($('.center .row-fluid').length + 1).toString();
            $('.center').append('<div class="row-fluid"><div class="span3"><select class="chosen-select" id="form-field-select-3" data-placeholder="Choose a Country..."><option value="">Text</option><option value="AL">Department</option><option value="HI">City</option><option value="HI">State</option><option value="HI">Country</option><option value="HI">Industry</option></select></div>'); 
                });

                $("#search-remove").click(function () {
                    if ($('.center .row-fluid').length == 1) {
                        alert("No more textbox to remove");
                        return false;
                    }
                    $(".center .row-fluid:last").remove();
                });
            });

apart from having multiple id problem in your code.. your question is not clear — exexzian
– exexzian, Commented Oct 5, 2013 at 18:38

Sergio · Accepted Answer · 2013-10-05 18:27:52Z

1

You have a problem with multiple IDs. Id has to be unique.

Try this:

var clone = $('.row-fluid').last().clone();
clone.find('#form-field-select-3').prop('id','clone_'+ids);
clone.find('option:selected').remove()

Demo here

answered Oct 5, 2013 at 18:27

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove selected option from dynamically added selects

1 Answer 1

Demo here

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo here

Comments

Your Answer

Sign up or log in

Post as a guest

Related