Hi All,
Today I am going to show you how to make dependent picklist on visualforce page with some few lines of code. This is client side dependent list. So it has following benefits:

1) No Action Function or Ajax, means we dont need to call server side script to filter the list of records.
2) Its based on javascript so its fast
3) We can extend the level of dependency



The idea here to use jQuery and one small method to make the dependency. I have got this idea from here.
1) First make your parent select list as below

2) Make your child select list. Make sure to give option a class name like this "child_{parent_record_value}".

 <select id="contactList" size="1">                 
     <apex:repeat value="{!contacts}" var="con">                     
         <option class="child_{!con.accountid}" value="{!con.Id}">{!con.Name}</option>
     </apex:repeat>                 
 </select>

    function prepareList(parent,child,isSubselectOptional){
        $("body").append("<select style='display:none' id='"+parent+child+"'></select>");
        $('#'+parent+child).html($("#"+child+" option"));
        $('#'+child).html("<option> — </option>");
        $('#'+parent).change(function(){
            var parentValue = $('#'+parent).attr('value');
            $('#'+child).html($("#"+parent+child+" .child_"+parentValue).clone());
            if(isSubselectOptional) $('#'+child).prepend("<option> — Select — </option>");
        });
    }

$(function() {        
        prepareList('accountList','contactList', false);
    });