[SalesForce] Map Visualforce Input picklist values

I need to be able to map a Picklist field values in a visualforce page, for use with some JQUERY.

Without using VF/SF it would look something like this:

HTML:

<div id="AU" class="resultHide" style="display:none;">
Australia
</div>

<div id="US" class="resultHide" style="display:none;">
United States
</div>

<select id="picklist1">
    <option value="AU">AU</option>
    <option value="AU">UK</option>
    <option value="US">US</option>
</select>

JQUERY:

<script>
$(document).ready(function ($) {
    $('#picklist1').change(function() {
        $('.resultHide').hide(300);
        $('#' + $(this).val()).show(300);
    });
});
</script>

I have managed to get the field mapped in VF, however I don't know how to assign and retrieve the values of the picklist for use with JQUERY:

VF:

<apex:form id="picklistForm" >
<apex:repeat value="{!label}" var="lab">
    <div style="margin-bottom:10px;">
        <apex:inputHidden id="country" value="{!lab.Country__c}"/>
            <apex:selectList id="type1" value="{!lab.Country__c}" size="1">
                <apex:selectOptions value="{!CountryTypes}"/>
            </apex:selectList>
    </div>
</apex:repeat>
</apex:form>

APEX:

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;
}

Any help would be appreciated…

Thanks

Best Answer

After some trawling of the interweb, and conversation with others, I came up with the following, which worked for me!

VF:

<apex:form id="picklistForm" >
<apex:repeat value="{!label}" var="lab">
    <div style="margin-bottom:10px;">
        <apex:selectList id="picklist2" value="{!lab.Country__c}" size="1" onchange="countryChanged(this)">
            <apex:selectOptions value="{!CountryTypes}"/>
        </apex:selectList>
    </div>
</apex:repeat>
</apex:form>

APEX:

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;
}

JS:

<script>
function countryChanged(selectedCountry){
var country = selectedCountry.options[selectedCountry.selectedIndex].value;
alert(country);
}
</script>

This returns an alert with the correct value. I know the script doesn't include the show/hide, but thats easy now I have the Value.

Related Topic