使用 jQuery、ajax、struts2 根据第一个下拉列表选择填充第二个下拉列表

Question

编辑 有没有其他方法可以根据第一个下拉选择 jquery ajax 填充第二个下拉列表。如果有人有链接，请发布任何链接。

---

我已根据第一个下拉列表选择更新了第二个下拉列表。我正在使用 jQuery 和 Struts2。我想使用 jQuery ajax 更新第二个下拉列表。有人可以帮我代码吗？我尝试使用下面的方法，但不知何故我无法将参数传递给 Action 类。先感谢您。

http ://www.joe-stevens.com/2010/02/23/populate-a-select-dropdown-list-using-jquery-and-ajax/

编辑： 根据 Climbage 所说，我正在使用我拥有的代码进行更新。

caseSelect 是第一个下拉菜单，termSelect 是第二个，casetermcodes 是操作。 selCaseDropDown 是隐藏变量，我想获取 Action 类中第一个下拉列表的选定值，其中我有该变量的 getter 和 setter 方法。我首先坚持将选定的值发送到操作类。至此我还没有做任何进一步的事情。

    $("#caseSelect").change(
        function(){
        $("#result").html('Retrieving ...');
        var selCase = $("#caseSelect").val();
        $.ajax({
            type: "POST",
            url: "/dwdst/casetermcodes",
            data: {selCaseDropDown: selCase},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#termSelect").get(0).options.length = 0;
                $("#termSelect").get(0).options[0] = new Option("Term Codes", "-1");   

                $.each(msg.d, function(index, item) {
                    $("#termSelect").get(0).options[$("#termSelect").get(0).options.length] = new Option(item.value, item.key);
                });
            },
            error: function() {
                alert("Failed to load Term Codes");
                $("#result").hide();
            }
        });
    });

动作类：

public String execute(){
    logger.info("selected value >>"+selCaseDropDown);
    return SUCCESS;
}

public String getSelCaseDropDown(){
    return selCaseDropDown;
}

public void setSelCaseDropDown(String selCaseDropDown){
    this.selCaseDropDown = selCaseDropDown;
}

Answer 1

我通过创建另一个简短的 JSP 解决了这个问题，该 JSP 仅作为 html 代码下拉（第二个下拉），并且在我的操作结果中将是这个短页面。

当第一页选择调用操作时，使用下面的代码并使用第二个简短的下拉菜单覆盖 jsp 中已显示的下拉菜单。

getSecondSelect 是我正在调用的操作，其结果为该短 jsp。

tercodeResult 是被新下拉列表替换的 div 标签。

selId 是从第一个下拉列表中选择的值。

        $.ajax({
            type: "GET",
            url: "getSecondSelect",
            data:"selId=" + selCase,
            dataType: "text/html;charset=utf-8",
            success: function(msg) {
                $("#tercodeResult").html(msg);
            }
        });

Answer 2

尝试一下，它将在 Struts 2.0.14 中使用 jsonplugin-0.32.jar 为您提供帮助。

struts.xml：

<struts>
     <package name="example" extends="json-default">
        <action name="HelloWorld" class="example.HelloWorld"  >
            <result type="json" />
        </action>
              <action name="HelloWorld1" class="example.HelloWorld"  >
            <result name="success" >example/HelloWorld.jsp</result>
        </action>
    </package>
</struts>

action类 Helloworld.java：

package prabhakar;

import glb.DB;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

/**
 * Prabhakar
 */
public class HelloWorld {

    private List<StateMaster> stateList = new ArrayList<StateMaster>();
    private List<RegnMaster> regnList = new ArrayList<StateMaster>();
    private Integer stateId;

    public Integer getStateId() {
        return this.stateId;
    }

    public void setStateId(Integer stateId) {
        this.stateId = stateId;
    }

    public List<StateMaster> getStateList() {
        return stateList;
    }

    public void setStateList(List<StateMaster> stateList) {
        this.stateList = stateList;
    }

    public void setRegnList(List<RegnMaster> regnList) {
        this.regnList = regnList;
    }

    public List<RegnMaster> getRegnList() {
        return regnList;
    }

    public String execute() throws Exception {

        stateList = DB.getStateData()//
            if (stateId != null) {
            regnList = DB.getRegnByStateId(stateId);
        }

        //setMessage(getText(MESSAGE));
        return "success";
    }
    /**
     * Provide default valuie for Message property.
     */
}

可以直接调用HelloWorld.action来查看JSON数据，也可以将JSON数据绑定到下面的表单元素上。

JSP页面HelloWorld.jsp：

  /*
     Prabhakar
  */

<%@ page contentType="text/html; charset=UTF-8" %>    
<%@ taglib prefix="s" uri="/struts-tags" %>

<script>
    <%@include file="../js/jquery-1.7.1.min.js"%>
</script>

<html>

    <!-- JavaScript Plugins -->
    <script>
        function getLoad(){

            var stateId = $('#state').val();

            $.getJSON('HelloWorld.action', {'stateId': stateId},
            function(data) {

                var divisionList = (data.regnList);

                var options = $("#regn");
                options.find('option')
                .remove()
                .end();
                options.append($("<option />").val("-1").text("--Select--"));
                $.each(divisionList, function() {

                    options.append($("<option />").val(this.regnId).text(this.regnName));
                });
            }
        );}
    </script>

    <!-- jQuery-UI Dependent Scripts -->

    <body>
        State List <s:select name="stateId" list="stateList" id="state" listKey="stateId" onchange="getLoad()" listValue="stateName" headerKey="0" headerValue="--select--" />
    Regn List <s:select name="regnId"  list="regnList" listKey="regnId" id="regn" listValue="regnName" headerKey="0" headerValue="--select--" />
</body>
</html>