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}".
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
<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>
<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); });
Thats it. Now you can see on the page the dependency is created automatically.
You can download the code from here
You can see the working demo here
http://labsprojects-developer-edition.ap1.force.com/DependentPicklist
Thanks
Aslam Bari