根据在另一个下拉列表中选择的值填充下拉列表

Question

我在模态中定义了两个下拉列表，需要填充并向弹簧控制器发送请求。特定的下拉列表由spring modelAttributes中绑定的列表填充。第二个下拉列表应根据第一个下拉列表中的选择进行更改。

模型属性：

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简单一些。

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

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

之后，清除以前的所有选项，然后相应地填充它并刷新它。

function populateSecondDropdonw(){  
  $('#secondDropdownId').children().remove();
  $.each(values.getAcceptedValue(), function(val, text) {
     $('#secondDropdownId').append($('<option></option>').val(text).html(text));
  });
  $('#secondDropdownId').focus();
}  

对于清除和刷新方法会有所不同，即如果您使用select2，您将使用$('#sel').select2('data', null);清除选择并使用$('#secondDropdownId').trigger('change');刷新它