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

Question

我在模态中定义了两个下拉菜单，需要填充它们并向 Spring Controller 发送请求。特定的下拉列表由 Spring modelAttributes 中绑定(bind)的列表填充。第二个下拉列表应根据第一个下拉列表中的选择进行更改。

模型属性:

model.addAttribute("configJson", configs);

View :

     <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>

将值绑定(bind)到属性的模型类:

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;
  }
}

读取并绑定(bind)到模型类的 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');