JavaScript - 将选定的下拉列表值传递给方法

Question

这可能是一件简单的事情，但我试图从 JSP 页面上的下拉列表中捕获所选值，并将所选值用作方法的参数。我可以使用 select 标记中的 onchange 事件来调用 java 脚本函数并捕获值，但我不确定如何将值发送到该方法。我认为有一种方法可以通过基于 ajax 的调用来做到这一点，但我不确定如何实现这一点。这是我正在使用的测试代码示例。谢谢。

function getSelected()
  {
    var selectedSource = document.getElementById("myselect").value;
        console.log(selectedSource);
  }


<select name="myselect" id="myselect" onchange="getSelected();">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

Answer 1

我编辑了答案，以使用 jQuery 将帖子包含到服务器。

您的 JavaScript 函数中有两个错误:

• 首先，您调用getselected() ，但函数名称是 getSelectedSource() ;
• 其次，您尝试查找 sourceSystem ，但你的id是myselect .

使用 jQuery 创建 HTTP Post 并发送参数 myselect ，例如，值为 selectedSource 。

在您的 servlet 中，您可以使用 request.getParameter("myselect") 获取此参数

 <script src="http://code.jquery.com/jquery-1.5.js"></script>
 <script>
       function getSelected()
    {
      var selectedSource = $("#myselect").val();
          console.log(selectedSource);
          $.post("test", { myselect : selectedSource},
                   function(data) {
                     alert("Data Loaded: " + data);
                   });              
    }
  </script>

<select name="myselect" id="myselect" onchange="getSelected();">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>