Question

在我的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'}"

如果我从“vehicleType”下拉菜单中选择“Truck”，我想从“vehicleList”下拉列表中禁用“Honda Accord”和“Nissan Altima”。如果我从“vehicleType”下拉菜单中选择“Sedan”，我想从“vehicleList”下拉列表中禁用“Ford F150”和“Nissan Altima”。

Answer 1

尝试以下方法：

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'));
});

Answer 2

尝试使用以下代码禁用选项：

$("#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/

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

2 个答案: