Organize multi select options in a page

Question

How to filter multi-select options. I have a scenerio where I have to ask user to search a department, technology and events.

1 department can have multiple technology and similarly 1 technology may belong to multiple departments.

List of department is static but technologies may vary (but still kind of constant in number). But number of events belongs to any technology or event is many.

Mandatory options for users:

• User can select multiple technology
• User can select multiple events under one department

I am using below approach to resolve this:

Pros:

• User can select multiple technologies (tag input in textbox)
• User can easily navigate through the departments

Cons:

• User may get confuse which event belongs to which technology
• User may prefer any technology over other, so he might be interested in events related to that particular technology the most.
• User have to click many times to get events name

^{download bmml source – Wireframes created with Balsamiq Mockups}

Is there any better approach to handle this kind of scenario?

Answer 1

I will suggest to grid the events with columns for technology and department, to sort/filter by.