Struts-JQuery 根据对不同下拉菜单的选择禁用下拉选项

Question

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

在此表单上，我想根据同一表单上单独下拉列表的 selection 禁用一个下拉列表的一个或多个选项。

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

<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" 下拉列表中 select "Truck"，我想禁用 "vehicleList" 中的 "Honda Accord" 和 "Nissan Altima"落下。如果我从 "vehicleType" 下拉列表中 select "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 根据对不同下拉菜单的选择禁用下拉选项

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

javascript

jquery

jsp

struts2

drop-down-menu