[SalesForce] Visualforce Select vs HTML Select – Mapping Values

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)

VF:

<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}"/>
        </apex:selectList>
</div>

<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"/>
        </apex:selectList>
</div>

<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>
        </select>
</div>

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

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

</apex:page>

APEX:

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 = [
        SELECT
            Country__c,
            id,
            name,
            type__c

        FROM labels__c limit 1];
}
}