function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Niharika GoudNiharika Goud 

How to create Dependent Picklist in Jquery

Hai.,
I am new in sfdc plz help me
 
NagendraNagendra (Salesforce Developers) 
Hi Surender,

Please try the sample code below and tweak it as per your requirement which might help you further.

Simple Jquery Dependent Picklist
User-added image

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>
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>
3) Put the below code in your head section 
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>");
        });
    }
4) Call the below method on load of the page. Make sure to pass proper parent and child select list ids. 
$(function() {        
        prepareList('accountList','contactList', false);
    });
That's it. Now you can see on the page the dependency is created automatically. 

You can see the working demo here Hope this will help you.

Please mark this as solved if it's resolved.

Thanks,
Nagendra
Niharika GoudNiharika Goud
Thank You for replay
plz send Overall Code
Shohrat MuhamovShohrat Muhamov
Hello Nagendra,

Would you be able to share the demo of the page?

Thx