如何根据另一个选择下拉列表中的选择从一个选择下拉列表中删除选项？

Question

I am using JavaScript Selectize dropdown. I want to change payment types as per the selection of reseravtion type in my code. Code is as following,

 $(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"> <select class="demo-default selectized" id="reservationType" name="reservationType" tabindex="7" opacity: 1" data-toggle="tooltip" data-container="body" data-placement="bottom"> <% for (int l = 0; l < reservationTypes.size(); l++) { %> <option value="<%=reservationTypes.get(l).getId()%>"><%=reservationTypes.get(l).getDescription()%></option> <% } %> </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"> <select class="demo-default selectized" id="paymentType" name="paymentType" tabindex="7" opacity: 1" data- toggle="tooltip" data-container="body" data-placement="bottom"> <% for (int l = 0; l < reservationPaymentTypes.size(); l++) { %> <option value="<%=reservationPaymentTypes.get(l).getId()%>"><%=reservationPaymentTypes.get(l).getDescription()%></option> <% } %> </select> </div> 

I have two selectize dropdowns.

1. For reservation type
2. For payement type

Values are getting from database. Reservation types drop-down screenshot , Payment types drop-down screenshot

When reservation type changes I want to change the payment types. Therefore onchange of reservation type I have called a method named managePaymentTypes(). I want to remove Credit payment option when reservation type is Individual(101). And I want to remove Salary deduct option when reservation type is Coporate(202). Individual should be default selection. This is my requirement. Someone please help me to solve this.

Answer 1

I have came up with the following solution.

    $(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})  
            }
        });
    }

}