禁用基于先前下拉菜单选择的选择

Question

遇到了导致一些障碍的问题。我正在为我的公司制作产品配置器。本质上，我们所有的产品都是定制的，因此不同的组件可能与其他组件不兼容。

我要做的是根据以前的下拉菜单选择禁用不同下拉菜单上的选择。

即1。如果我在“控制器类型”部分选择通用，在“系列类型”部分，我希望所有选项都变灰。

即2。如果我在“控制器类型”部分中选择 EAFV 底座安装（水平），在“系列类型”部分中，我希望所有选项都可用。

即3。如果我在“控制器类型”部分中选择 EAFV 底座安装（垂直），在“系列类型”部分中，我想要除 4:1 和 6:1 之外的所有选项。

如果可能的话，我想用 Javascript/Jquery 来做这件事。我查看了 Stackoverflow 和各种 Google 搜索结果来寻找答案，但它们没有提供我需要的帮助。感谢您对此提供的任何和所有帮助，并且可以提供所需的任何其他信息。

谢谢！

Answer 1

先定义你的规则怎么样：

var controllerTypeFunctions = {
    Default:function(){
        $('#series option').prop('disabled',false);   
    },
    UV: function(){
        $('#series option').prop('disabled',true);   
    },
    EAFVH: function(){
        $('#series option').prop('disabled',false);   
    },
    EAFVV: function(){
        $('#series option').filter(function(){
           return this.value == "4" || this.value == "6"
        }).prop('disabled',true);   
    }    
}

然后根据值调用正确的规则：

$('#type').on('change',function(){
    controllerTypeFunctions.Default(); //resets all to enabled

    var val = $(this).val();
    controllerTypeFunctions[val]();
});

下面的实例：

var controllerTypeFunctions = {
    Default:function(){
        $('#series option').prop('disabled',false);   
    },
    UV: function(){
        $('#series option').prop('disabled',true);   
    },
    EAFVH: function(){
        $('#series option').prop('disabled',false);   
    },
    EAFVV: function(){
        $('#series option').filter(function(){
           return this.value == "4" || this.value == "6"
        }).prop('disabled',true);   
    }    
}


$('#type').on('change',function(){
    controllerTypeFunctions.Default();
    
    var val = $(this).val();
    controllerTypeFunctions[val]();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Controller Type</b><br>
    <select id="type">
    <option value="">Select One</option>
    <option value="CR">Rack Mount</option>
    <option value="CS">Portable</option>
    <option value="EAFVV">EAFV Base Mount (Vertical 62 Series)</option>
    <option value="EAFVH">EAFV Base Mount (Horizontal Base)</option>
    <option value="CC">Chassis Box (Hoffman Enclosure)</option>
    <option value="PAFV">PAFV Base Mount</option>
    <option value="UV">Universal</option>
    <option value="HO">High Output Single Channel</option>
    <option value="LO">Low Output Single Channel</option>
</select>
<br>
<br>
     <b>Series Type</b><br>
     <p class="series"><font size="1">Only applies to certain controller  types</font></p>
    <select id="series" onchange="updateText('series')">
     <option value="">Select One</option>
     <option value="1" data-temp="EAFVV">1:1</option>
     <option value="2">2:1</option>
     <option value="4">4:1</option>
     <option value="6">6:1</option>
</select>
<br>

Answer 2

试试这个：

$("#type").change(function () {
    var selectList = document.getElementById("type");
    if (selectList.value === "UV") {
        $("#series option").attr("disabled", "disabled");
    } else if (selectList.value === "EAFVH") {
        $("#series option").removeAttr("disabled");
    } else if (selectList.value === "EAFVV") {
        $("#series option").removeAttr("disabled");
        $("#series option:nth-child(4)").attr("disabled", "disabled");
        $("#series option:nth-child(5)").attr("disabled", "disabled");
    } else {
        $("#series option").removeAttr("disabled");
    } 
});