HTML <option> and jQuery

Making these two things compliment each other. How to access and set them.

by ppumkin

HTML

<select id="ComboBox" >
     <option value="1">Value 1</option>
          <option value="2">Value 2</option>
          <option value="3">Value 3</option>
          <option value="4">Value 4</option>
          <optgroup label="Group1">
            <option value="5">Value 5</option>
            <option value="6">Value 6</option>
            <option value="7">Value 7</option>
           <option value="8">Value 8</option>
         </optgroup>
       </select>

<select id="ComboBox2" >
     <option value="1">Value 1</option>
          <option value="2">Value 2</option>
          <option value="3">Value 3</option>
          <option value="4">Value 4</option>
          <optgroup label="Group1">
            <option value="5">Value 5</option>
            <option value="6">Value 6</option>
            <option value="7">Value 7</option>
           <option value="8">Value 8</option>
         </optgroup>
       </select>

JavaScript

//Get the value of the selected item in the select box
alert($("#ComboBox").val());


//set the value of the selected item in the select box
$("#ComboBox").val(3);

//Get the value of the selected item in the select box
alert($("#ComboBox").val());


//Fires after users changes ComboBox1
$("#ComboBox").change(function() 
  {      alert("You changed it to "+ $("#ComboBox").val())  
           calculate();
          });

//Fires after users changes ComboBox2
$("#ComboBox2").change(function() 
  {       calculate();          });


//A function called from any where to add both vales of the comboBoxes
function calculate() {
    $('body').append(parseInt($("#ComboBox").val()) + parseInt($("#ComboBox2").val()) + "<br/>")
    
};