Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sarvesh001sarvesh001 

iI wnat to show two dependent picklist values in vf page

HI

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.....
Thanks,
Sarvesh.
 
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
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_quick_start_dependent_picklists.htm

If you want to create by VF page. Please check below post
https://www.minddigital.com/how-to-create-dynamic-dependent-picklist-of-objects-within-salesforce/

Please let us know if this will help you

Thanks,
Amit Chaudhary
sarvesh001sarvesh001
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.

Regards
sarvesh001sarvesh001

Hi vibhor goel,


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

<html>
<head>
<!--http://stackoverflow.com/questions/29623225/javascript-dependent-drop-down-list-->

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>



    <script>
           
            
            $(function(){
    
            var $cat = $("#category1"),
                $subcat = $("#category2");
            
            $cat.on("change",function(){
                    var _rel = $(this).val();
                    $subcat.find("option").attr("style","");
                    $subcat.val("");
                    if(!_rel) return $subcat.prop("disabled",true);
                    $subcat.find("[rel="+_rel+"]").show();
                    
                    });
    
            });
                
            
    </script>
    
        <style type="text/css">
                       #category2 option{
                display:none;
            }

                #category2 option.label{
                    display:block;
                }
                
        </style>
</head>

<body>
                   
   <form id="formname" name="formname" method="post" action="submitform.asp" >
        <table width="50%" border="0" cellspacing="0" cellpadding="5">
            <tr>
                <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>
                    </select>
                </td>
            </tr>
            <tr>
                <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>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
</apex:page>


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