Как удалить параметры из выпадающего списка в соответствии с выбором из другого выпадающего списка?

Question

Я использую раскрывающийся список JavaScript Selectize. Я хочу изменить типы платежей в соответствии с выбором типа reseravtion в моем коде. код выглядит следующим образом,

$(document).ready(function() { 
 
    $("#reservationType").change(function() {   
 
     managePaymentTypes(); 
 
    });  
 
}); 
 

 
var $reservationTypeObj = $('#reservationType').selectize({ 
 
    sortField: { 
 
     field: localStorage.getItem("selectizeField"), 
 
     direction: localStorage.getItem("selectizeDirection") 
 
    }, 
 
     dropdownParent: localStorage.getItem("selectizeDropdownParent") 
 
}); 
 

 
var $paymentTypeObj = $('#paymentType').selectize({ 
 
    sortField: { 
 
     field: localStorage.getItem("selectizeField"), 
 
     direction: localStorage.getItem("selectizeDirection") 
 
    }, 
 
     dropdownParent: localStorage.getItem("selectizeDropdownParent") 
 
}); 
 

 
function managePaymentTypes(){ 
 
    var resType = $('#reservationType :selected').val(); 
 
     if(resType==202){ 
 
     //remove option 2 - Salary deduct in selectize. 
 
     }else if(resType==101) { 
 
     //remove option 1 - Credit in selectize. 
 
     }else{ 
 
     //// 
 
     } 
 
}

<label class="col-md-1 control-label firstcol" for="type" style="text-align:left">Reservation Type : </label> 
 
<div class="col-md-2" id="reservationTypeDiv" data-toggle="tooltip" data-container="body" data-placement="bottom"> 
 
\t <select class="demo-default selectized" id="reservationType" name="reservationType" tabindex="7" opacity: 1" data-toggle="tooltip" data-container="body" data-placement="bottom"> 
 
\t \t <% 
 
\t \t for (int l = 0; l < reservationTypes.size(); l++) 
 
\t \t { 
 
\t \t %> 
 
\t \t \t <option value="<%=reservationTypes.get(l).getId()%>"><%=reservationTypes.get(l).getDescription()%></option> 
 
\t \t <% 
 
\t \t } 
 
\t \t %> 
 
\t </select>  
 
</div> 
 
<label class="col-md-1 control-label firstcol" for="payment" style="text-align:left">Payment Type : </label> 
 
<div class="col-md-2" data-toggle="tooltip" id="paymentTypeDiv" data-container="body" data-placement="bottom"> 
 
\t <select class="demo-default selectized" id="paymentType"  name="paymentType" tabindex="7" opacity: 1" data-  toggle="tooltip" data-container="body" data-placement="bottom"> 
 
\t \t <% 
 
\t \t for (int l = 0; l < reservationPaymentTypes.size(); l++) 
 
\t \t { 
 
\t \t %> 
 
\t \t \t <option value="<%=reservationPaymentTypes.get(l).getId()%>"><%=reservationPaymentTypes.get(l).getDescription()%></option> 
 
\t \t <% 
 
\t \t } 
 
\t \t %> 
 
\t </select>  
 
</div>

У меня есть два selectize выпадающие.

1. Для типа резервирования
2. Для типа Payement

Значения получать из базы данных. Reservation types drop-down screenshot, Payment types drop-down screenshot

При изменении типа резервирования я хочу изменить типы платежей. Поэтому при замене типа резервирования я назвал метод под названием managePaymentTypes(). Я хочу удалить вариант оплаты по кредиту, если тип резервирования является индивидуальным (101). И я хочу удалить опцию Salary deduct, когда тип резервирования - Coporate (202). Индивидуальный должен быть выбран по умолчанию. Это мое требование. Кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Answer 1

Я придумал следующее решение.

$(document).ready(function() {  
<% 
    for(SportsCenterReservationPaymentType paymentType : reservationPaymentTypes){ 
    %> 
     paymentTypes.push({id: <%=paymentType.getId()%>, desc: '<%=paymentType.getDescription()%>'}); 
    <% 
    } 
    %> 
    $("#reservationType").change(function() {   
     loadResourceTable(); 
     managePaymentTypes(); 
    });  

});

function managePaymentTypes(){ 
    var resType = $('#reservationType :selected').val(); 
    $('#paymentType')[0].selectize.clearOptions(); 

    if(resType==202&& resType!=101){ 

     $.each(paymentTypes, function (idx, obj) { 
      if(obj.id!=333){ 
       $('#paymentType')[0].selectize.addOption({value:obj.id,text:obj.desc}) 
      } 
     }); 
    } 

    if(resType==101&&resType!=202){ 

     $.each(paymentTypes, function (idx, obj) { 
      if(obj.id!=222){ 
       $('#paymentType')[0].selectize.addOption({value:obj.id,text:obj.desc}) 
      } 
     }); 
    } 

}