Question

从标题中，你可以理解这个有点复杂，但它确实不应该。我确信这是一个简单的解决方法，我无法绕过它。

我选择了框A，其中填充了选择框B，其组合标准填充了列表A和列表B.当选择框A更改时，相应的信息将加载到选择框B中，列表应该也会填充。目前，仅当选择框B 更改时，才会填充列表。

它已设置为在页面加载时第一个框A / B组合的列表被加载。我需要对其进行设置，以便当框A更改（并且框B自动更改）时，列表将加载到框A / B标准。

我认为发生的事情是，当我尝试将任何类型的处理程序附加到框B（或框A）时，它会查看框B中先前加载的信息，而不是框A更改时新加载的信息。我需要它来查看新的A / B组合。

我尝试过各种各样的处理程序，javascript，jQuery：.onChange，.load，.live，.focus，但我认为除非它在框B而不是框B中获取新值，否则任何工作都不会有效旧的价值。我在javascript和.jsp中的文档就绪函数中尝试了所有这些：

<span class="caption">Business Unit</span>
<select style="margin-bottom: 20px" onchange="loadRatingPlans()"
    name="cde_bus_unit" id="cde_bus_unit">
<c:forEach items="${divisions}" var="division">
    <option value="${division.cdeBusUnit}">${division.nmeBusUnit}
</option>
</c:forEach>
</select>

<span class="caption">Rating Plan</span>
<select style="margin-bottom: 20px" onchange="loadAvailableLimitInfo(); 
    loadBURPLimitInfo()" 
    name="cde_rating_plan" id="cde_rating_plan">
<c:forEach items="${ratingPlans}" var="ratingPlan">
    <option value="${ratingPlan.cdeRatingPlan}">${ratingPlan.nmeRatingPlan}
    </option>
</c:forEach>
</select>

当物理选择框B时，这会成功更改LimitInfo（列出A和B）。如果只列出A更改，我该如何使它做同样的事情？如果您有任何疑问，请问我！谢谢！

以下是javascript的代码：

//populate the Rating Plans box based on the Business Unit
function loadRatingPlans() {
var busUnit = $('select[name="cde_bus_unit"]').val();

$.ajax({
    type : 'GET',
    url : 'loadRatingPlans.do',
    dataType : 'json',
    data : {
        busUnit : busUnit
    },
    success : function(data) {
        console.log(data);
        //get rid of old rating plans
        $('[name=cde_rating_plan]').empty();
        //load new rating plans
        if (data != null) {
            data.forEach(function(rp) {
                $('<option>').text(rp.nmeRatingPlan).val(rp.cdeRatingPlan)
                        .appendTo('[name=cde_rating_plan]');
            }); // end forEach
        }// end if

    } // end success
});// end ajax

}// end uploadRatingPlans

//load the available limits based on which are already assigned
function loadAvailableLimitInfo() {
var cdeBusUnit = $('#cde_bus_unit').val();
var cdeRatingPlan = $('#cde_rating_plan').val();

$.ajax({
    type : 'GET',
    url : 'loadAvailableLimitInfo.do',
    dataType : 'json',
    data : {
        cdeBusUnit : cdeBusUnit,
        cdeRatingPlan : cdeRatingPlan
    },

    success : function(data) {
        console.log(data);

        $('#limAvailable').empty();

        var i;
        for (i = 0; i < data.length; i++){
            $('#limAvailable').append('<li class="limit-list" id="' 
                    + data[i].cdeLimit + '">' + data[i].nmeLimit + '</li>');
            $('#limAvailable').append('\n');
        }

    } // end success
});// end ajax

}// end loadDivisionInfo

//load the assigned limits
function loadBURPLimitInfo() {
var cdeBusUnit = $('#cde_bus_unit').val();
var cdeRatingPlan = $('#cde_rating_plan').val();

$.ajax({
    type : 'GET',
    url : 'loadBURPLimitInfo.do',
    dataType : 'json',
    data : {
        cdeBusUnit : cdeBusUnit,
        cdeRatingPlan : cdeRatingPlan
    },

    success : function(data) {
        console.log(data);

        $('#limAssigned').empty();

        var i;
        for (i = 0; i < data.length; i++){
            if(data[i].indDefault = -1){
            $('#limAssigned').append('<li class="limit-list, 
                    assigned-li-default" id="' 
                    + data[i].cdeLimit + '">' + data[i].nmeLimit + '</li>');
            $('#limAssigned').append('\n');
            }
            else{
            $('#limAssigned').append('<li class="limit-list" id="' 
                    + data[i].cdeLimit + '">' + data[i].nmeLimit + '</li>');
            $('#limAssigned').append('\n'); 
            }
        }

    } // end success
});// end ajax

Answer 1

我解决了这个问题。答案是创建一个方法，它将仅根据第一个框的值返回列表。我转到数据库并获取第二个框的列表值，然后根据第二个列表中的第一个值返回列表。我已经设置了一个方法，用于根据页面加载的第一个和第二个框中的第一组值加载列表。

如何在更改第一个框时基于2个选择框加载2个列表

1 个答案: