Заполнение раскрывающегося списка на основе значения, выбранного в другом раскрывающемся списке

Question

У меня есть два раскрывающихся списка в модале, которые необходимо заполнить и отправить запрос контроллеру пружины. Конкретные раскрывающиеся списки заполняются списком, связанным в весенних атрибутах модели. И второе выпадающее меню должно быть изменено в соответствии с выбором в первом.

атрибут модели:

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');