Picklist.component

<apex:component controller="PicklistController" >
    <apex:attribute name="value" required="true" type="String" description="Provide the field binding"/>
    <apex:attribute name="objectName" required="true" type="String" description="Provide object name"/>    
    <apex:attribute name="valueField"  required="true" type="String" description="Provide the value field for the picklist"/>    
    <apex:attribute name="labelField"  required="true" type="String" description="Provide the label field which needs to be shown in picklist"/>                   
    <apex:attribute name="styleClass" required="false" type="String" description="Style class for the select list"/>         
    <apex:attribute name="required" required="false" type="Boolean" default="false" description="Id of picklist component"/> 
    <apex:attribute name="style" required="false" type="Boolean" default="" description="Style for the select list"/>                           
    <apex:attribute name="filterFields" required="false" type="String" default="" description="Comma separated api names of filters."/>                           
    <apex:attribute name="filterValues" required="false" type="String" default="" description="Comma separated jQuery selectors from which value needs to be taken."/>                               
    <apex:outputPanel layout="block"  styleClass="{!IF(required,'requiredInput','')}">
          <apex:outputPanel layout="block" styleClass="{!IF(required,'requiredBlock','')}"/>
          <apex:inputText value="{!value}" style="display:none;" required="{!required}" styleClass="hiddenPicklist_{!uniqueId}" />
          <select class="{!styleClass}" id="selectPicklist_{!uniqueId}" style="width:50%">          	         	
          </select>                                      
          <img src="/img/loading.gif" id="spinner_{!uniqueId}" style="display:none;">
          </img>
		    <script type="text/javascript" >
		    		
		             (function(){
		             	
		             	 //Regestering all the required events
		             	 window.registerHandlers_{!uniqueId} = function(){
		             	 		             	 	
		             	 	//Every change needs to be reflected in the hidden field	             	 	
	                        $('#selectPicklist_{!uniqueId}').change(function(event){		                            	                        	
	                        	$('.hiddenPicklist_{!uniqueId}').val(this.value);
	                        });
	                        
	                        //When there is controlling field then on chagne of that controlling field picklist needs to be refreshed
	                        if('{!filterValues}'!=''){
	                        	$('{!filterValues}'.split(',')).each(function(){
	                        		var that = this;
	                        		$(''+this).change(function(){		                        	                        			
		                        		//if the controlling field has any value then only send request otherwise dont call it
	                        			if(this.value!=''){
	                        				//If the picklist is refreshed then it triggers on change event which populates other dependent picklists
		                        			refreshPicklist_{!uniqueId}();
	                        			}else{
	                        				//If the value is null or blank then other dependent picklist also needs to be refreshed
	                        				$('#selectPicklist_{!uniqueId}').html('');
		                        			$('#selectPicklist_{!uniqueId}').append($('<option value="">-None-<option>'));	
		                        			//Set the value of hidden field to be blank
		                        			$('.hiddenPicklist_{!uniqueId}').val('');                       					                        				
	                        			}
	                        		});
	                        	});
	                        }
		             	 }		             	 
		             	 window.refreshPicklist_{!uniqueId} = function(){			             	 			             	 		             	 		                      		             	 
                            var filterValues = '';
                            if('{!filterValues}'!=''){//if there are some filters added then value should be taken dynamicall based on the passed jQuery selectors
                            	var filters = '{!filterValues}'.split(',');                            	
                                for(var index in filters ){                                	
                                	if(filters[index]+''.trim()=='' || $(filters[index])==null){
                                		filterValues+= (index == 0)?'':',';
                                		continue;
                                	} 
                                	if(index==0){                                		
                                		filterValues=($(filters[index]).val()!=null)?$(filters[index]).val():'';	
                                	}else{
                                		filterValues+=','+ ($(filters[index]).val()!=null)?$(filters[index]).val():'';	
                                	}
                                }
                            } 
                            console.log('Ajax Request For {!valueField}');
                            $('#spinner_{!uniqueId}').show();
		             	 	Visualforce.remoting.Manager.invokeAction(
						        '{!$RemoteAction.PicklistController.getOptions}', 
						        '{!objectName}',
						        '{!valueField}',
						        '{!labelField}',
						        '{!filterFields}', 
						        ''+filterValues,
						        function(result, event){
						            if (event.status) {						                
						                $('#selectPicklist_{!uniqueId}').html('');
						                $(result).each(function(){
						                	//marking the selected field
						                    var isSelected = '{!value}' == this.value ?'selected="selected"':'';
						                	$('#selectPicklist_{!uniqueId}').append($('<option value="'+this.value+'"  '+isSelected+'>'+this.label+'</option>'))
						                });
						                //setting the value from select picklist to hidden picklist field
						                if($('#selectPicklist_{!uniqueId}').val()==''){
							                $('.hiddenPicklist_{!uniqueId}').val('');						                
						                }
						                $('#spinner_{!uniqueId}').hide();						               
						            } else if (event.type === 'exception') {
						                alert(event.message);
						            }
						            //Triggering the change event so that if there are other dependent picklist which have registered 
						            // on change event would get refreshed
						            $( "#selectPicklist_{!uniqueId}" ).trigger( "change" );	
						        }
						    );		             	 	
		             	 }		      

		             	 //refreshing picklist every time when page is loaded and if picklist is reRendered
		             	 //keeping the track whether page is already loaded       	
		                 window.isLoaded_{!uniqueId} = (window.isLoaded_{!uniqueId}!=null)?isLoaded_{!uniqueId}:false;            
		                 if(isLoaded_{!uniqueId}){		                    
		                    registerHandlers_{!uniqueId}();	                  
		                    refreshPicklist_{!uniqueId}();  		                                        
		                 }        
		                 $(function(){ //document is ready
		                     if(!isLoaded_{!uniqueId}){		
		                     	registerHandlers_{!uniqueId}();                      	                        
		                        refreshPicklist_{!uniqueId}();
		                     }                  
		                     isLoaded_{!uniqueId} = true;//marking that page is loaded
		                 });                           
		             })(jQuery);         
		    </script>
    </apex:outputPanel>           
    
</apex:component>