如何根据另一个选择下拉列表中的选择从一个选择下拉列表中删除选项
How to remove options from a selectize dropdown according to a selection from another selectize dropdown?
我正在使用JavaScript选择下拉菜单。我想改变支付类型,按照我的代码中预订类型的选择。代码如下,
$(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>
我有两个选择下拉菜单。
- 预订类型
- 付款类型
值正在从数据库中获取。预订类型下拉截图,付款类型下拉截图
当预订类型更改时,我想更改付款类型。因此,在更改预订类型时,我调用了一个名为managePaymentTypes()的方法。当预订类型为个人(101)时,我想删除信用支付选项。当预订类型为corporate(202)时,我想删除工资扣除选项。个人应该是默认选择。这是我的要求。谁来帮我解决这个问题。
我提出了以下解决方案。
$(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})
}
});
}
}
相关文章:
- 如何使用jQuery选择下拉列表的值
- Jquery 读取编号组中选择下拉列表的数组
- 使用$_POST值选择下拉列表
- 使用Ajax或JavaScript选择下拉列表选项后,在同一页面上执行PHP脚本
- 根据url填充表单选择下拉列表
- 使 URL 开始选择下拉列表
- 引导程序选择下拉列表
- 如何通过选择下拉列表中的选项从另一个 php 文件中获取数据
- 保持元素处于禁用状态,直到未在 Angularjs 中选择下拉列表
- Knockoutjs - 单击按钮时打开选择下拉列表
- 使用选择下拉列表的性别角度过滤器
- 如何根据选择下拉列表从表单重定向到 URL
- 如果未选择第一项,请选择下拉列表 jQuery
- 选择下拉列表需要在选中时显示提供商的详细信息-无法通过我的脚本显示url
- 使用对象(JavaScript或jQuery)填充选择下拉列表
- 如何在选择下拉列表值的文本框中获取值
- 删除基于先前下拉列表选择的“选择下拉列表”选项
- jQuery验证插件-比较两个选择下拉列表的自定义方法
- 通过ajax选择下拉列表
- JavaScript:使用用于Protractor测试的页面对象选择下拉列表项