function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

iI wnat to show two dependent picklist values in vf page


I want two picklist like country and states dependent picklists in vf page .I want to write client side script to chenge the picklist vales based on another pecklist value. I  achieve this byusing apex logic but i want to achive this one by using script on vf page.

Can any one help me please.....
Amit Chaudhary 8Amit Chaudhary 8
Please check below post. I hope that will help you.
If you added field dependecy at field level then please check below post

If you want to create by VF page. Please check below post

Please let us know if this will help you

Amit Chaudhary
Hi Amit Chaudhary,

Thanks for replay,  
i want to achieve this one on client side scripting i don't want to use apes logic.

vibhor goelvibhor goel
Hi Sarvesh,

On the picklist, use a onchange event to call a javascript function.

The function could be something like this

function picklistchange(){

var pickval1 = document.getElemntById('id of the picklist changed').value();
var pickval2 ;
//write your logic to check the conditions.
if(pickval1 == 'test'){

//after you know the values to assign to picklist 2
pickval2 = ["abc", "def", "xyz"];
document.getElementById("value of the picklist list/repeat ").innerHTML = pickval2 ;


after this on complete we need to write a rerender to refresh the block of picklist 2.

This is a very basic idea. If you provided some code , it could be specific.


Hi vibhor goel,

<apex:page controller="dependentpicklist" showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" >


<script src="//"></script>

            var $cat = $("#category1"),
                $subcat = $("#category2");
                    var _rel = $(this).val();
                    if(!_rel) return $subcat.prop("disabled",true);
        <style type="text/css">
                       #category2 option{

                #category2 option.label{

   <form id="formname" name="formname" method="post" action="submitform.asp" >
        <table width="50%" border="0" cellspacing="0" cellpadding="5">
                <td width="41%" align="right" valign="middle">Category1 :</td>
                <td width="59%" align="left" valign="middle">
                    <select name="category1" id="category1">
                        <option value="">Select Category1</option>
                        <option value="home_ware">Home Ware</option>
                        <option value="education">Education</option>
                        <option value="books">Books</option>
                <td align="right" valign="middle">Category2 :</td>
                <td align="left" valign="middle">
                    <select disabled="" id="category2" name="category2">
                        <option class="label" >Select Category2</option>
                        <!-- Home Ware -->
                        <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
                        <option rel="home_ware" value="audio-video">Audio/Video</option>
                        <option rel="home_ware" value="beddings">Beddings</option>
                        <option rel="home_ware" value="camera">Camera</option>
                        <option rel="home_ware" value="cell-phones">Cell Phones</option>
                        <!-- Education -->
                        <option rel="Education" value="Colleges">Colleges</option>
                        <option rel="Education" value="Institutes">Institutes</option>
                        <option rel="Education" value="Schools">Schools</option>
                        <option rel="Education" value="Tuitions">Tuitions</option>
                        <option rel="Education" value="Universities">Universities</option>
                        <!-- Books -->
                        <option rel="Books" value="College Books">College Books</option>
                        <option rel="Books" value="Engineering">Engineering</option>
                        <option rel="Books" value="Magazines">Magazines</option>
                        <option rel="Books" value="Medicine">Medicine</option>
                        <option rel="Books" value="References">References</option>

it is working fine but after select first select list second list should't auto populate selct category2. i want to autopoplate.