Question

我在模式中定义了两个下拉列表，需要填充这些下拉列表并将其发送到spring控制器。特定的下拉列表由绑定在spring modelAttributes中的列表填充。第二个下拉菜单应根据第一个下拉菜单的选择进行更改。

model属性：

model.addAttribute("configJson", configs);

视图：

     <div>
                            <div class="form-group">
                                <label for="signup_type_select">Sign Up Type</label>
                                <select class="form-control" id="signup_type_select"
                                        onchange="toggleAdditionalInfoInput('#signup_type_select')"
                                        placeholder="name" name="type">
                                    <c:forEach items="${configJson.getLeads()}" var="option">
                                        <option value="${option.getName()}">${option.getName()}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <c:forEach items="${configJson.getLeads()}" var="values" varStatus="count">


                                <c:choose>
                                    <c:when test="${values.getAcceptedValue().size() eq 0}">
                                        <div class="form-group hidden" id="signup_${count.index}_div">
                                            <label for="${values.getName()}">Event1</label>
                                            <input required type="text" disabled="disabled" class="form-control"
                                                   id="signup_${count.index}_input"
                                                   placeholder="event" name="event">
                                        </div>
                                    </c:when>
                                    <c:otherwise>
                                        <c:choose>
                                            <c:when test="${count.index eq 0}">
                                                <div class="form-group" id="signup_${count.index}_div">
                                                    <label for="${values.getName()}">Event2</label>
                                                    <select class="form-control" id="signup_${count.index}_input"
                                                            placeholder="value" name="value">
                                                        <c:forEach items="${values.getAcceptedValue()}"
                                                                   var="context">
                                                            <option>${context}</option>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                            </c:when>
                                            <c:otherwise>
                                                <div class="form-group hidden" id="signup_${count.index}_div">
                                                    <label for="${values.getName()}">Event3</label>
                                                    <select class="form-control" disabled="disabled"
                                                            id="signup_${count.index}_input"
                                                            placeholder="value" name="value">
                                                        <c:forEach items="${values.getAcceptedValue()}"
                                                                   var="context">
                                                            <option>${context}</option>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>

                        </div>

<script type="text/javascript">
function toggleAdditionalInfoInput(id){
var divId = $(id).val();
var inputid = id;
console.log(id)
inputid = id.replace('select','');
console.log(id)
var optionList = $(id+' > option').map(function() { return this.value; }).get();


for(var i =0;i<optionList.length;i++){
    if(optionList[i] === divId){
        console.log(inputid+"_"+i+"_div")
        $(inputid+i+"_div").removeClass("hidden")
        $(inputid+i+"_input").removeAttr("disabled")
    }else{
        $(inputid+i+"_div").addClass("hidden")
        $(inputid+i+"_input").attr("disabled","disabled")
      }
   }

}
 </script>

将值绑定到属性的模型类：

public class WebsiteContentLeadInfoJsonHelper {

private List<AdditionalInformationContext> leads ;

public List<AdditionalInformationContext> getLeads() {
    return leads;
}

public void setLeads(List<AdditionalInformationContext> leads) {
    this.leads = leads;
  }
}

AdditionalInformationContext类：

public class AdditionalInformationContext {
String name;
List<String> acceptedValue;


public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public List<String> getAcceptedValue() {
    return acceptedValue;
}

public void setAcceptedValue(List<String> acceptedValue) {
    this.acceptedValue = acceptedValue;
  }
}

读取并绑定到模型类的json值：

{  
 "leads":[  
  {  
     "name":"webinars",
     "acceptedValue":[  
        "how-to-save-money-with-clover",
        "Elo-Star-ddd"
     ]
  },
  {  
     "name":"events",
     "acceptedValue":[  
        "NRA-2016",
        "Money2020-2018"
     ]
   }
 ]

}

现在问题是没有根据第一个下拉列表的选择来选择第二个下拉列表。我该如何解决？（仅显示“如何用三叶草省钱”，“ Elo-Star-ddd”。）

Answer 1

我建议使用jQuery简单一些。

首先，使用事件处理程序捕获选择第一个下拉列表的事件。

--service-node-port-range=6000-32767

之后，清除所有先前的选项，然后进行相应填充并刷新。

$( "#firstDropdownId" ).change(function() {
  populateSecondDropdown();
});

清除和刷新方法会有所不同，即，如果您使用的是select2，则可以使用function populateSecondDropdonw(){ $('#secondDropdownId').children().remove(); $.each(values.getAcceptedValue(), function(val, text) { $('#secondDropdownId').append($('<option></option>').val(text).html(text)); }); $('#secondDropdownId').focus(); }清除选择，并使用$('#sel').select2('data', null);

刷新选择

根据在另一个下拉菜单中选择的值填充一个下拉菜单

1 个答案: