Question

I’m working on a multiselect that pops up in a modal dialog. When the dialog closes, I’m populating a <ul> with <li>‘s that contain text from the :selected options. When each individual <li> is clicked, I want the <li> to fade away and the corresponding :selected <option> to become unselected. I have everything working except unselecting the <option>.

Here’s my code:

$('.control-finished').click(function(){
            $('ul.multiselect-dropdown-options-'+name+'').empty();
            $('option:selected', select).each(function(index, value) {
                var livalue = $(this).attr('value');
                $('ul.multiselect-dropdown-options-'+name+'').append('<li class="dropdown-option '+livalue+'">'+$(value).text()+'<!-- <a class="remove-option '+livalue+'"> -->x</li>');
                $('li.dropdown-option').click(function(){
                    $(this).fadeOut(500, function() { $(this).remove(); });
                    $('option:selected', this).removeAttr('selected');
                });
            });         

        });

Any help is greatly appreciated!

Answer 1

I believe your problem is on this line:

$('option:selected', this).removeAttr('selected');

This is saying, find all option:selected that is a descendent of li.dropdown-option. But you’re deleting these after the fadeout, so of course it’s not going to find it.

So you need to change the 2nd parameter in the jQuery function above. (this), to the actual parent dom element you wish to search under.

I don’t know what your HTML looks like, so I can’t provide you with a more detailed solution.