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

【问题标题】：Struts-JQuery Disable drop down option based on a selection of a different drop downStruts-JQuery 禁用基于选择不同下拉列表的下拉选项
【发布时间】：2015-08-25 03:34:04
【问题描述】：

在我的 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”。

【问题讨论】：

标签： javascript jquery jsp drop-down-menu struts2

【解决方案1】：

尝试以下代码禁用选项：

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

【讨论】：

【解决方案2】：

尝试以下方法：

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

【讨论】：