[FIXED] Catching the value of the selected item in HTML Select Group

Issue

Sorry if my question is duplicated, but i cant find a proper answer, i have an HTML select group, that is populated with a data base Array List. This was done by using JSTL and Servlets.

When my List is filled i use it by double clicking the items in it, this is done by using JavaScript. (I know that is a bad practice to write scriplets but ill do it this time.)

The problem ocurrs that when i double click the item in the list, a post method is generated pointing to another servlet, the submited value to this servlet is The full ArrayList instead of just the value that was double clicked.

Can anybody give me a clue of how to solve this?

//-----------Filling Array List from value in data base and set Response

            ArrayList<String> queryReclamosPendientes = new ArrayList<String>();
            queryReclamosPendientes = DaoMVC.listaReclamosDeUnTipo(0);
           request.setAttribute("conteo0", queryReclamosPendientes);

When the response was sent to the JSP here is how i fill my List

<!-- HTML code Filling the list-->

<select size="10">
               <c:forEach var="conteo0" items="${conteo0}">
                  <option ondblclick="myFunction()" value="${conteo0}">${conteo0}</option>
               </c:forEach>
            </select>


<!--  Scriplet to activate the list Double click and send a post to other servlet-->

            <script>
                function myFunction() {
                    document.body.innerHTML += '<form id="dynForm" action="${pageContext.request.contextPath}/ServletServirReclamos" method="post"><input type="hidden" name="numeroSeguimiento" value="${conteo0}"></form>';
                    document.getElementById("dynForm").submit();

                }
            </script>

This works fine... But now when i double click an element inside this list this is the value that the servlet gets.

'[D-100-16, F-101-16, E-102-16, C-103-16, D-105-16, D-106-16]' 

Is there a value to get the index of the item that i clicked or a way to point to the selected item in order to do value="${conteo0[$SelectedPosition]}" Just to get 1 value and not all the list.

Thanks in advance!

Solution

Ok i just found the answer

HTML

<select size="10" id="listaSeguimientos">
                <optgroup label="Reclamos por atender.">
                <c:forEach var="conteo0" items="${conteo0}" varStatus="theCount">
                    <option ondblclick='myFunction()'>${conteo0}</option>
                </c:forEach>
                </optgroup>
            </select>

JAVASCRIPT

function myFunction() {

    var lista = document.getElementById("listaSeguimientos");  
    var valorLista = lista.options[lista.selectedIndex].value;


    document.body.innerHTML += '<form id="dynForm" action="${pageContext.request.contextPath}/ServletServirReclamos" method="post"><input type="hidden" id="numeroSeguimiento" name="numeroSeguimiento" ></form>';
    document.getElementById("numeroSeguimiento").value = valorLista;
    document.getElementById("dynForm").submit();
    console.log("This is my value " + valorLista);

}

These 2 lines where the Key

var lista = document.getElementById("listaSeguimientos");  
var valorLista = lista.options[lista.selectedIndex].value;

First you get the list from the JSP and then you get the Value of the Option in the selected Index.

And that´s all

Answered By - Cesar Cisneros
Answer Checked By - Pedro (JavaFixing Volunteer)