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 是第一个Dropdown， 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中显示的下拉时，第二个短下拉只有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

尝试这一点，将使用jsonplugin-0.32.jar帮助您使用Struts 2.0.14。

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>

动作类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>

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

2 个答案: