Заполните 2-й выпадающий список на основе 1-го выпадающего списка, используя jQuery, ajax, struts2

Question

Редактировать Есть ли другой способ заполнить 2-й выпадающий список согласно 1-му выпадающему списку jquery ajax. Пожалуйста, оставьте любую ссылку, если у кого-то есть.

---

Я обновил второе раскрывающееся меню на основе первого раскрывающегося списка. Я использую jQuery и Struts2. Я хочу обновить второй выпадающий с помощью jQuery AJAX. Может кто-нибудь, пожалуйста, помогите мне код. Я попытался с помощью метода ниже, но каким-то образом я не смог передать параметры в класс действий. Заранее спасибо.

http://www.joe -stevens.com / 2010/02/23 / заселить-а-Select-раскрывающийся-список-используя-JQuery-и-Аякса /

Изменить: Согласно 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, который выпал (только второй) в виде 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

Попробуйте, это поможет вам в 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>

класс действий 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>