I have been looking at using a select list (picklist) in a Visualforce page form.

Below are four methods of doing this. Each has it's own positives, however, i would like to know which is the best easiest way to implement.

My requirement is to be able to use some JQUERY (show hide) based on the picklist value, whilst still being able to manage the picklist values from salesforce.

Any thoughts on your experience, and how exactly i would implement this would be appreciated, thanks...

Example 1 - using class to populate the list from the object - I suspect this is going to be everyone's initial suggestion, however, I am at a loss on how to add the value, to be referenced in JS

Example 2 - using Visualforce SelectList, manually adding options - I cant seem to be able to map the values to JS, and the Options aren't manageable from Salesforce. Not too sure of the point of this?

Example 3 - using HTML, manually adding options - Works great with JS, no integration with SF

Example 4 - Using the Visualforce field - No way of getting the values for this to use with JS (inline - option val)


<apex:page controller="picklistsController" >

<apex:form >
<apex:repeat value="{!label}" var="lab">
<div style="margin-bottom:10px;">
    <h3>example 1</h3>
        <p>using class to populate the list from the object</p>

        <apex:selectList id="example1" value="{!lab.Country__c}" size="1">
            <apex:selectOptions value="{!CountryTypes}"/>

<div style="margin-bottom:10px;">
    <h3>example 2</h3>
        <p>using Visualforce SelectList, manually adding options</p>

        <apex:selectList id="example2" value="{!lab.Country__c}" size="1">
            <apex:selectOption itemValue="AU" itemLabel="Australia"/>
            <apex:selectOption itemValue="UK" itemLabel="United Kingdom"/>
            <apex:selectOption itemValue="US" itemLabel="United States"/>

<div style="margin-bottom:10px;">
    <h3>example 3</h3>
        <p>using HTML, manually adding options</p>

        <select id="example3">
            <option value="AU">Australia</option>
            <option value="UK">United Kingdom</option>
            <option value="US">United States</option>

<div style="margin-bottom:10px;">
    <h3>example 4</h3>
        <p>Using the Visualforce field</p>

        <apex:inputField id="example4" value="{!lab.Country__c}"/>



public class picklistsController {

public list <labels__c> label {get;set;}

public list <SelectOption> getCountryTypes (){

    List <SelectOption> options = new List<SelectOption>();
    Schema.DescribeFieldResult fieldResult = Labels__c.Country__c.getDescribe();
    List <Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        for( Schema.PicklistEntry f : ple){
            options.add(new SelectOption(f.getLabel(), f.getValue()));
    return options;

public picklistsController(){

    label = [

        FROM labels__c limit 1];
  • option 1 - I've used multiple jQuery plugins with VF <apex:selectList> like Chosen and Select2
    – cropredy
    Jun 17 '16 at 4:59
  • Can you explain the term "No way of setting value" in the example 4?
    – Praveen
    Jun 17 '16 at 5:00
  • @cropredy Thanks, do you know of any examples where you are referencing the values? for example - function myFunction() {$('#clickMe').tab('show');$('example1').val('AU').trigger('change');} Jun 17 '16 at 5:21
  • @Praveen Apologies, I meant, grab the val for JS purposes, i have updated my question Jun 17 '16 at 5:24
  • @TheMikeyBoosh what do you mean by "however, I am at a loss on how to add the value, to be referenced in JS" in example 1?
    – Saroj Bera
    Jun 17 '16 at 6:54

When i'm using an HTML select i like to add an "apex:inputHidden" in my select. When option changes, with "onchange" i put the new value in the inputHidden. You can reference an "apex:inputHidden" in JS adding an "id" to your tag and then calling it with document.getElementById('$Component.componentid').value;

But i don't know if i'm getting your question nor my workaround is your best choice.


The easiest way for you to do this, i believe, is the first one having a list of SelectOptions in your controller class, and a string to keep the selected value. In order to be able to call this from javascript in your page, you need to onchange, call an action function to rerender your function and oncomplete calling your function that uses the jquery. Something of the following:


public List<SelectOption> myOptions {get;set;}
public String selectedOption {get;set;}


<apex:actionFunction name="rerenderScript" rerender="scriptPanel" oncomplete="useJquery();"/>
<apex:selectList value="{!selectedOption}" onchange="rerenderScript();">
    <apex:selectOptions value="{!myOptions}"/>
<apex:outputPanel id="scriptPanel">
    function useJquery(){
    //use JQUERY with {!selectedOption}

Hope this points you in the right direction!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.