基於對其他下拉菜單的選擇，Struts-JQuery禁用下拉菜單選項

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/