Hi,

Try the below code snippet as reference:

----------- vf page----------------

<apex:page controller="examples52" >

<apex:form >

<apex:selectList id="mp1" value="{!countries}" multiselect="true" onclick="SelectAllCountry();" > Channel :

<apex:selectOptions rendered="true" value="{!items}"/>

</apex:selectList><p/>

<apex:commandButton value="Test" action="{!test}" rerender="out" status="status"  />

<apex:outputPanel id="out">

<apex:actionstatus id="status" startText="testing...">

<apex:facet name="stop">

<apex:outputPanel >

<p>You have selected:</p>

<apex:dataList value="{!countries}" var="c">{!c}</apex:dataList>

</apex:outputPanel>

</apex:facet>

</apex:actionstatus>

</apex:outputPanel>

<script>

function SelectAllCountry() {

var multi = document.getElementById("mp1").index;

alert(multi);

for (i = 0; i < multi.options.length; i++)

multi.options[i].selected = true;

}

</script>

</apex:form>

</apex:page>

-------------- apex controller----------------

public class examples52 {

String[] countries = new String[]{};

public PageReference test() {

return null;

}

public List<SelectOption> getItems() {

List<SelectOption> options = new List<SelectOption>();

options.add(new SelectOption('Americas','Americas'));

options.add(new SelectOption('AP','AP'));

options.add(new SelectOption('EMEA','EMEA'));

return options;

}

public String[] getCountries() {

return countries;

}

public void setCountries(String[] countries) {

this.countries = countries;

}

}

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

Please look at this blog by PAT PATTERSON

http://blogs.developerforce.com/developer-relations/2012/06/a-multiselect-picklist-visualforce-component.html

Thanks,

Devendra