Question

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

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

i.e1。如果我在“控制器类型”部分选择通用，在我的“系列类型”部分中，我希望所有选项都显示为灰色。

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

i.e3。如果我在“控制器类型”部分中选择EAFV底座（垂直），在我的“系列类型”部分中，除了4：1和6：1之外，我想要所有可用选项。

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

谢谢！

Answer 1

试试这个：

$("#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");
    } 
});

Answer 2

首先定义规则怎么样：

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]();
});

下面的实例：

＆＃13;

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]();
});

＆＃13;

<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>

＆＃13;

根据以前的下拉菜单选择禁用选择

2 个答案: