unable to pass selected value from ajax dropdown

Question

I have an ajax dropdown list that generates values from database. I can select the value, but for some reason I can't seem to actually pass the selected value on to another variable or just pass the value to an empty textbox. Below is my ajax call. How do I pass the selected value back to the HTML? I've done request.getParameter, but it comes back empty. For some reason it's just not keeping the selected value.

function listSess(){
  var name = document.getElementById("studentID").value;

  $.ajax({
        url : "<%=context%>/ListSessionsServlet?name=" + name,
        type : "POST",
        async : false,
        dataType: "json",
          success : function(data) {
              var toAppend = '';
              $.each(data,function(i,o){

                  toAppend += '<option>'+o.sessid+'</option>';
                 });

            $('#sessid')
                .find('option')
                .remove()
                .end()
                .append(toAppend);

          }  
    });
}  

Answer 1

tag option should be set value property.

 $.each(data,function(i,o){
     toAppend += '<option value="'+o.sessid+'">'+o.sessid+'</option>';
  });

Answer 2

It is better to debug the data object. If it is the normal object with property names and property values then it might work.

function listSess(){
  var name = document.getElementById("studentID").value;

  $.ajax({
        url : "<%=context%>/ListSessionsServlet?name=" + name,
        type : "POST",
        async : false,
        dataType: "json",
          success : function(data) {
              var toAppend = '';
              $.each(data,function(i,o){

                  toAppend += '<option value="'+o+'">'+i+'</option>';
                 });

            $('#sessid')
                .find('option')
                .remove()
                .end()
                .append(toAppend);

          }  
    });
}