Convert picklist and dependent picklist to multiselect picklists in visualforce page

Question

I want to convert picklist and dependent pick list in to two multipick lists in visualforce page for selecting multiple values for searching purpose. When I select multiple values in first multipicklist then dependent multipicklist has to show dependent picklist field values of all selected controlling multipicklist fields.

Can anyone please help me how to achieve this one in visualforce page? Thanks,

Answer 1

I can only think of this solution below. Here the second picklist values will be autopopulated depend on the selected values on the first picklist. Hope this will help.

Controller

public class loadingSpinnerCtrl {
    public List<String> dropdown1{get; set;}
    public List<SelectOption> options;
    public void spin() {
        options = new List<SelectOption>();
        for(String s: dropdown1){
            if(s == '1'){
                options.add(new SelectOption('1','Value 1'));
                options.add(new SelectOption('2','Value 2'));
            }else if(s == '2'){
                options.add(new SelectOption('3','Value 3'));
                options.add(new SelectOption('4','Value 4'));
            }else if(s == '3'){
                options.add(new SelectOption('5','Value 5'));
                options.add(new SelectOption('6','Value 6'));
            }else if(s == '4'){
                options.add(new SelectOption('7','Value 7'));
                options.add(new SelectOption('8','Value 8'));
            }else if(s == '5'){
                options.add(new SelectOption('7','Value 9'));
                options.add(new SelectOption('8','Value 10'));
            }            
        }    
        long now = datetime.now().gettime();
        while(datetime.now().gettime()-now<2000); // Busy loop for 2000 ms to simulate delay
    }
    public List<SelectOption> getItems() {
        return options;
    }    
}

VF Page

<apex:page controller="loadingSpinnerCtrl">
    <apex:form id="form">    
        <apex:selectList id="selected_list" multiselect="true" value="{!dropdown1}" required="false" size="6">
            <apex:selectOption itemvalue="1" itemLabel="First"/>
            <apex:selectOption itemvalue="2" itemLabel="Second"/>
            <apex:selectOption itemvalue="3" itemLabel="Third"/>
            <apex:selectOption itemvalue="4" itemLabel="Fourth"/>
            <apex:selectOption itemvalue="5" itemLabel="Fifth"/>
            <apex:actionSupport event="onchange" reRender="dropdown2" action="{!spin}" status="status"/>
        </apex:selectList>
        <apex:selectList id="dropdown2"  multiselect="true" required="false" size="6">
            <apex:selectOption itemvalue="None" itemLabel="--None--"/>
            <apex:selectOptions value="{!items}" />
        </apex:selectList>
        <apex:actionStatus id="status">
            <apex:facet name="start">
                <div>Loading Please wait........</div>
            </apex:facet>
        </apex:actionStatus>               
    </apex:form>
</apex:page>