jquery remove element and also list selection

I have a select list that when the user selects an item it builds an li element on the fly, when the users clicks the li element, the li is removed. Below is the code that I currently have,

The below adds the li on select of an option

$('#sectors').change(function(e){

$('#selected_sectors').empty();

$(this).find(':s开发者_如何转开发elected').each(function(i,e

{$('#selected_sectors').append($('<li>').text($(e).val())); }); });

The below removes the generated li

$('ul#selected_sectors li').live('click', function(){ $(this).fadeOut('slow').remove(); $('#selected_sectors').val($(this).text()).attr('selected', false); });

What I am wanting is when an li is removed the select option with the same value as the li's text is also unselected?

You can select options based upon value like the following:

$("#sectors").val("0")

Or you can select based upon first option element

$("#sectors option").first().attr("selected", "selected");

Example on jsfiddle