Dropdown opens a div with select boxes

please apologize the unclear title. How can I build a solution like on this page:

http://reisen.com/

I want a solution like the dropdown field for airports (Abflughäfen). After clicking the dropdown a panel appears with checkboxes in it. After selecting the boxes, the selected items appear in the dropdown.

Are there any plugins for jquery or have I code it by myself? How is this done?

Thanks in advance fo开发者_运维知识库r your feedback.

This is probably not complicated enough that it relies on a plugin.

1) Show the panel when they click the dropdown

$('#airport').change(function(){
   $('#panel').toggle(); 
});

2) Make a close button event that figures out what they selected

$('#close').button().click(function(){
   $('#panel').toggle();

    //figure out exactly what they checked off
    var results = new Array();
    $('input[name="group"]:checked').each(function(){
       results.push($(this).val()); 
    });

    //append back to the select this list
    $('#airport').append('<option value="bar">'+results.join(',')+'</option>'); 
});

If you want to see this in action in simplified form, look here: http://jsfiddle.net/ryleyb/RHBcc/