How to add a hidden field to an option element in javascript

I want to add a hidden field to an option element in javascript but I am just learning and have no clue how to do it. I need the hidden variable because I am adding strings that i derive from an object to the select element, but I need to have the id of those objects so I can retrieve them and recreate the objects later on.

I want to add it to this function:

function receiveAnswer(response) {
  var aSeats = document.getElementById("aSeats");
  while (aSeats.childNodes.length > 0) { // clear it out
    aSeats.removeChild(aSeats.childNodes[0]);
  }
  for (var i = 0; i < response.aSeats.length; i++) { // add the items back in
    var option = aSeats.appendChild(document.createElement("option"));
    option.appendChild(document.createTextNode(response.aSeats[i]));
    option.value = i;

  }
}

here is the html:

<% Venue v = (Venue)session.getAttribute("currentVenue"); %>
<% List<Conceptual_Package> cpList = Conceptual_PackageDAO.getInstance().getByVenue(v.getId()); %>

What Packages do you want to see?

 <form method="post" action="ttp.actions.Sale3PackAction.action">
 <select name="packid" id="packid">
     <% for (Conceptual_Package cp: cpList) { %>
    <option value="<%=cp.getId()%>"><%=cp.getName1()%></option>
    <% } %>


 </select>

    <input type="button" value="  next  " onclick="getSeats();"/>

    </form>


<!--new-->


Available Seats:

<div>

</div>

 <select name="aSeats" size="10" id="aSeats">
 </select>


    <input type="button" value="  add  " onclick="addToCart();"/>

    <div>

    </div>


Selected Seats:
 <form method="post" action="ttp.actions.sale4Action.action">
     <select name="Seat2" size="10" id="seat2">

     </select>

<input type="button" value="  remove  " onclick="removeF开发者_高级运维romCart();"/>

    </form>

<div>

</div>

 <form method="post" action="ttp.actions.finalizeSaleAction.action">

    <input type="submit" value="  Buy Tickets  "/>

    </form>

---

If you prefer you can build up elements with strings using innerHtml.

http://javascript.about.com/library/bldom06.htm

Handy hint #2: You can clear out your select by simply setting the options length to 0:

aSeats.options.length = 0;