Why I am getting UnknownProperty error

Question

I am getting the below error while saving the vf page - What i am doing wrong -

Error -

Error: Unknown property 'SelectOptionValue.Id'  

Class -

public with sharing class autoController 
{
    public List<Geography__c> GeoTemp = new List<Geography__c>();
    public autoController()
    {

    }

    public List<SelectOption> GeoList
    {
    get
    {
        GeoTemp = [Select u.Id,u.Name,u.GeoGroup__c From Geography__c u];

        GeoList= new List<SelectOption>();

        for(Geography__c temp : GeoTemp )
        {
        GeoList.add(new SelectOption(temp.Id, temp.Name));
        }
        return GeoList;
    }
    set;
    }
}

Page -

    <apex:page controller="autoController">
  <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css"></link>
  <div style="width:500px;margin:0 auto;">
  <form action="" method="post">
    <div>
    <label class="control-label">Enter Country: </label>
      <div>
       <select data-placeholder="" name="program[]" class="chzn-select" multiple="multiple" tabindex="6" style="width:500px"> 
        <apex:repeat value="{!GeoList}" var="a">
        <option value="{!a.value}">{!a.label}</option>
        </apex:repeat>
       </select>
       </div> <br/>
       <b>Autopopulate Continent: </b>
       <input type="text" size="40" id="continentsText"/>
    </div>
    </form>
  </div>   
  <script type="text/javascript">
    var countryArray = ['India', 'USA', 'China','FInland','Norway','Netherlands','England','Ukraine','Russia','Japan','Korea','Burma','Srilanka','Iran','Iceland','Canada','Rome','Australia','Armenia','Albania','Afghanisthan'];
    var continents = ['ASIA', 'N.AMERICA', 'ASIA','EUROPE','EUROPE','EUROPE','EUROPE','EUROPE','ASIA','ASIA','ASIA','ASIA','ASIA','ASIA','EUROPE','N.AMERICA','EUROPE','AUSTRALIA','EUROPE','EUROPE','ASIA'];
    $(".chzn-select").chosen().change(function() {  
    var hexvalues = [];
    var labelvalues = [];
    var continentsFieldText = "";
    var continentName;
    $('.chzn-select :selected').each(function(i, selectedElement) {
        continentName = continents[countryArray.indexOf($(selectedElement).val())];
        if(continentsFieldText.indexOf(continentName)<0){
        continentsFieldText = continentsFieldText + ";"+continentName;
        }

    });
    //Remove the first semicolon and add to the Continent textbox
    $("#continentsText").val(continentsFieldText.substr(1));
    });         
  </script>
</apex:page>

Regards

Answer 1

A SelectionOption has a value and a label not an Id and a Name.

Use:

<option value="{!a.value}">{!a.label}</option>