How do I get javascript to see updated select value?

Question

I have a page with about 100 dropdown menus that I need to pass to another. So, I've put everything in an array that I'm sending via javascript. However, I'm not sure how to get the javascript to see the changed values of the dropdowns before sending. I mocked up some code to give you an idea of the problem. It only sends the value of the dropdown box at the time the page is initialized. Any help would be appreciated.

<select id="mydropdown">
  <option value="Milk">Fresh Milk</option>
  <option value="Cheese">Old Cheese</option>
  <option value="Bread">Hot Bread</option>
</select>

<script>
var data = new Array();

data[0] = document.getElementById("mydropdown").value;
</script>


<form name="data" method="POST" action="passdata1b.php">
<input type="hidden" name="data">
</form>
<script>
function sendData()
{
  // Initialize packed or we get the word 'undefined'
  var packed = "";
  for (i = 0; (i < data.length); i++) {
    if (i > 0) {
      packed += ",";
    }
    packed += escape(data[i]);
  }
  document.data.data.value = packed;
  document.data.submit();
}
</script>
<h1>This is what the array contains:</h1>
<ul>
<script>
  for (i = 0; (i < data.length); i++) {
    document.write("<li>" + data[i] + "</li>\n");
  }
</script>
</ul>
<a href="javascript:sendData();">Go to passdata1b.php</a>

Answer 1

Sam's answer was good, except..

data[0] = document.getElementById("mydropdown").value;

..that won't work since it's a dropdown menu. Instead get the value of the selected option. Use this instead:

var zeData = document.getElementById("mydropdown");
data[0] = zeData.options[zeData.selectedIndex].value;

Answer 2

Why can't you put this logic:

var data = new Array();
data[0] = document.getElementById("mydropdown").value;

In your sendData() function?

---

Comment if you need an example, but this should be a pretty easy fix. That way, when you click the link and run sendData(), it will parse the mydropdown value..instead of doing it on page load.