Struts-JQuery禁用下拉选项基于选择不同的下拉

Struts-JQuery Disable drop down option based on a selection of a different drop down

本文关键字：选择 于选择 选项 Struts-JQuery      更新时间：2023-09-26

在我的JSP中，我有一个包含多个下拉项的表单。这是一个使用struts-tags声明的表单。

在这个表单上，我想要禁用一个下拉菜单的一个或多个选项，基于同一表单上另一个下拉菜单的选择。

这里有一个简单的例子来演示。这就是我对下拉列表的编码方式。

<s:select id="vehicleType" name="vehicleType" list="#{'0': 'Truck','1':'Sedan'}"
<s:select id="vehicleList" name="vehicleList" list="#{'0':'Ford F150','1':'Dodge Ram','2':'Honda Accord','3':'Nissan Altima'}"

如果我从"车辆类型"下拉列表中选择"卡车"，我想从"车辆列表"下拉列表中禁用"本田雅阁"answers"日产Altima"。如果我从"车辆类型"下拉列表中选择"轿车"，我想从"车辆列表"下拉列表中禁用"福特F150"answers"日产Altima"。

试试下面的代码来禁用这些选项:

$("#vehicleType").on('change', function() {
    var vlist = $("#vehicleList");
    vlist.find('option').prop('disabled', false);
    if (this.value === "0") {
        vlist.find('option[value="2"]').prop('disabled', true);
        vlist.find('option[value="3"]').prop('disabled', true);
    }
    else if (this.value === "1") {
        vlist.find('option[value="0"]').prop('disabled', true);
        vlist.find('option[value="1"]').prop('disabled', true);
    }
});

演示:http://jsfiddle.net/mfd13w6u/

尝试如下:

function resetVehicleList(vehicleType)
{
    $('#vehicleList option').show();
    if($(vehicleType).val() == '0')
    {
        $('#vehicleList option[value="2"]').hide();
        $('#vehicleList option[value="3"]').hide();
    }
    else if($(vehicleType).val() == '1')
    {
        $('#vehicleList option[value="0"]').hide();
        $('#vehicleList option[value="1"]').hide();
    }
    $('#vehicleList').val($('#vehicleList option:visible').first().attr('value'));
}
$('#vehicleType').change(function(){
    resetVehicleList(this);
});
$(document).ready(function(){
    resetVehicleList($('#vehicleType'));
});
相关文章：