在HTML中捕获所选项目的值选择组

时间:2016-10-25 22:37:14

标签: javascript java jquery jsp servlets

很抱歉,如果我的问题重复,但我找不到合适的答案,我有一个HTML选择组,其中填充了数据库阵列列表。这是通过使用JSTL和Servlets完成的。

当我的列表被填充时,我通过双击其中的项目来使用它,这是通过使用JavaScript完成的。 (我知道编写scriplet是一种不好的做法,但这次做不好。)

问题突然出现,当我双击列表中的项目时,会生成一个指向另一个servlet的post方法,该servlet的提交值是完整的ArrayList,而不仅仅是双击的值。

有人能给我一个如何解决这个问题的线索吗?

//-----------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);

当响应发送到JSP时,我是如何填充我的列表

<!-- 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>

这很好用......但是现在当我双击这个列表中的一个元素时,这就是servlet获取的值。

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

是否有值来获取我点击的项目的索引或指向所选项目的方式以执行value =“$ {conteo0 [$ SelectedPosition]}”只是为了得到1个值而不是全部清单。

提前致谢!

2 个答案:

答案 0 :(得分:0)

您对项目和列表使用相同的变量名称,然后我认为您需要将项目传递给myFunction

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

答案 1 :(得分:0)

好的,我刚刚找到答案

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);

}

这两行中的Key

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

首先从JSP获取列表,然后在所选索引中获得选项的值。

这就是