【问题标题】:JSP drop down list questionJSP下拉列表问题
【发布时间】:2011-02-26 01:46:15
【问题描述】:

我想问一个问题

我想在一个 JSP 页面中显示 3 个下拉列表,

第二个下拉列表基于第一个下拉列表中的选定值,

等等……

据我所知,当用户从下拉列表中选择一个值时,

用户需要点击一个按钮将值传递到服务器端。

像这样:

<form action="second_drop.jsp">
   <select name="drop">
    ...
   </select>
   <input type="submit" value="Submit" />
</form>

现在,我想问一个问题,

是否可以在不点击按钮的情况下传递下拉列表值?

也就是说,当用户从下拉列表中选择一个值时,

选择的值可以自动传递到服务器端,无需点击提交按钮。

然后服务器会根据选择的值显示第二个下拉列表

感谢您的帮助。

【问题讨论】:

标签: jsp drop-down-menu


【解决方案1】:

使用ajax 的神秘力量绝对有可能做到这一点!您正在寻找的这种特殊行为称为“链式下拉菜单”或“相关下拉菜单”。以下是我对jQuery 的处理方式,大量评论因此(希望)很清楚:

标记

<form action="second_drop.jsp">
   <select id="first_drop" name="drop">
    ...
   </select>
   <select id="second_drop" disabled="disabled"></select>
   <input type="submit" value="Submit" />
</form>

JavaScript

$(function () // run the following code when the DOM is ready
{
    $('#first_drop') // equivalent to document.getElementById('first_drop')
        .change(function () // run the following code whenever the DDL value changes
        {
            var val = $(this).val(); // get the new value of the first DDL
            $('#second_drop').load(
              'second_drop.jsp', // this is the URL to load
              {drop: val} // pass this data to the server with the request
              function () // execute this function when the response comes back
              {
                  $('#this').attr('disabled', false); // enable the 2nd DDL
              });
        });
});

second_drop.jsp 应回复 &lt;option&gt;s 的列表:

<option value="val1">Option 1</option>
<option value="val2">Option 2</option>
<option value="val3">Option 3</option>

那里有很多,如果您不熟悉 JavaScript 和/或 jQuery,那么请问您是否有什么不明白的地方。

使用的jQuery函数

【讨论】:

    【解决方案2】:

    这是可能的,有时与地址下拉列表一起使用,例如选择一个国家,然后填充州/省列表,以及航班,例如选择一个出发机场,然后过滤可能的目的地列表。

    为此,您需要客户端 Javascript。您需要连接 onchange 事件,以便它提交表单(或向另一个页面发出请求)以与服务器通信以获取新列表。

    例如(尽管您可能需要设置一个隐藏字段来表示“这是下拉刷新,而不是“我已完成输入数据”提交)

    <form>
    <select name="drop" onchange="this.form.submit()">
    ...
    </select>
    </form>
    

    您可能想阅读JSP: drop down list 2 depends on drop down list 1 的答案 - 有多种方法可以做到这一点,这取决于您需要做什么。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-06-19
      • 2016-04-18
      • 1970-01-01
      • 2023-03-25
      • 1970-01-01
      相关资源
      最近更新 更多