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

时间:2016-09-04 09:30:15

标签: javascript jquery drop-down-menu selectize.js

我正在使用JavaScript Selectize下拉列表。我想根据我的代码中选择的研究类型更改付款类型。 代码如下,

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

我有两个选择下拉列表。

  1. 预订类型
  2. 付款类型
  3. 值来自数据库。 Reservation types drop-down screenshotPayment types drop-down screenshot

    预订类型更改时,我想更改付款方式。 因此,在更改预留类型时,我调用了一个名为managePaymentTypes()的方法。我想在预订类型为个人(101)时删除信用卡付款选项。我想在预订类型为Coporate(202)时删除Salary deduct选项。个人应该是默认选择。这是我的要求。有人请帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

我想出了以下解决方案。

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

}