如何检索文本框的值并在同一页面中使用它而不重定向到JSP中的下一页？

Question

我正在JSP中运行以下代码。 我面临的问题，在检索值..从下拉列表中说，然后用/显示在同一页面值，其中下拉存在，但不会重新导向到下一个页面。

<div class="form-row"> 
    <label>
        <span>Department Name</span> 
        <select name="s1">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </label>
</div>
<input type=text value="">

当我从列表中选择任何内容时，应检索该值，而无需进入下一页。 应该在同一页面中将其检索并显示在文本框中。

没有Ajax，该怎么办？ 有人能帮助我吗 ...？

非常感谢。

Answer 1

好的，那我们就必须使用JavaScript。 正如ShamSUP所说，JSP是服务器端语言，而JavaScript是用户端语言。 Google对此有更多了解。

代码就是这个。

<div class="form-row"> 
            <label>
                <span>Department Name</span> 
                <select name="s1" onChange="displayDropValue()">
            <option>A</option>
             <option>B</option>
             <option>C</option>
          </select>
           </label>
        </div>

<input name="o1" type=text value="">

<script>
function displayDropValue() {
  dropdownValue = document.getElementsByName("s1")[0].value; //Get dropdown value by looking for the name attribute. Since this function returns as array we have to use [] to say first array element
  document.getElementsByName("o1")[0].value = dropdownValue;
}
</script>

我没有测试代码，但是应该可以。

Answer 2

您将需要使用javascript才能获得所需的效果。 由于JSP是服务器端脚本语言，因此除非将值以某种方式提交给服务器进行处理（例如表单提交），否则JSP将无法“查看”用户从字段中选择的内容。

Javascript是一种客户端脚本语言，这意味着可以在用户的​​Web浏览器中对其进行处理，因此可以“查看”用户对页面上的所有内容所做的操作。 为了达到您想要的效果，所需的javascript数量很少。

首先，您将必须找到一种方法来指定要填充的文本输入。 最简单的方法是向其添加id 。

<input type="text" id="textfield" value="">

完成此操作后，我们需要绑定事件处理程序以侦听select框的值更改的时间，然后获取该值并将其放入文本字​​段。

<script type="text/javascript">
// get the select element, then bind a function to the change event
document.querySelector('select[name=s1]').onchange = function(){
    // get the text field, and set it's value to the value of the select box
    document.getElementById('textfield').value = document.querySelector('select[name=s1]').value;
}
</script>

现在，您只需获取该代码，并将其放入html body的head或结尾即可。