<apex:page controller="DependentPicklistController">
<apex:sectionHeader subtitle="Dependent Picklist Demo" title="Aslam Bari"/>
<apex:includeScript value="{!$Resource.jquery}"/>
<script>
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);
});
</script>
<apex:form>
<apex:pageBlock>
<apex:pageBlockSection columns="1">
<apex:pageBlockSectionItem>
<apex:outputLabel value="Account" />
<apex:outputPanel>
<select id="accountList" size="1">
<option value="">-Select-</option>
<apex:repeat value="{!accounts}" var="acc">
<option value="{!acc.Id}">{!acc.Name}</option>
</apex:repeat>
</select>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem>
<apex:outputLabel value="Contact" />
<apex:outputPanel>
<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>
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
