Javascript 基于上一个下拉菜单选择禁用选择

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

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

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

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

i、 e3。如果我在“控制器类型”部分中选择EAFV基座安装（垂直），在“系列类型”部分中，我希望除4:1和6:1之外的所有选项都可用

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

谢谢大家!

试试这个：

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

---

首先定义规则如何：

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控制器类型函数={
默认值：函数（）{
$（“#系列选项”）.prop（'disabled'，false）；
},
UV:function（）{
$（“#系列选项”）.prop（'disabled'，true）；
},
EAFVH:function（）{
$（“#系列选项”）.prop（'disabled'，false）；
},
EAFVV:function（）{
$（“#系列选项”）.filter（函数（）{
返回this.value==“4”| | this.value==“6”
}).prop（'disabled'，true）；
}    
}
$（'#type'）。在（'change'，function（）上{
controllerTypeFunctions.Default（）；
var val=$（this.val（）；
控制器类型函数[val]（）；
});

控制器类型

选择一个
机架安装
便携式
EAFV底座安装（垂直62系列）
EAFV底座安装（水平底座）
机箱（霍夫曼外壳）
PAFV底座
普遍的
高输出单通道
低输出单通道




系列类型

仅适用于某些控制器类型
选择一个
1:1
2:1
4:1
6:1

有一些专用插件。即：或。我相信有更多的人，只需要谷歌。谢谢你的帮助！然而，我修改了控制器类型的onchange属性，不幸的是它仍然不能工作。修改后的代码（仅控制器类型的顶部到末端）位于以下位置：。您给我的正在加载的Javascript/Jquery代码位于：。如果您有时间，您能看看我是否做错了什么吗？我已经修改了代码，不需要onchange属性。你现在需要做的就是把它粘贴进去，如果你的HTML在发布后没有任何变化，这应该会起作用。试试编辑过的版本，告诉我它是怎么回事。您也不需要文档就绪位。应使用not
attr
处理输入元素的启用/禁用状态。属性通常会影响DOM元素的动态状态，而不会更改序列化HTML属性。例如，输入元素的value属性、输入和按钮的disabled属性或复选框的checked属性。应使用.prop（）方法来设置disabled和checked，而不是.attr（）方法@阿什顿·弗伦奇：我非常感谢你对我的帮助。不幸的是，它仍然没有发挥作用。我将更新后的代码带到了JSFIDLE，但它不起作用。这是页面：。我在使用和不使用文档就绪代码的情况下都尝试了它，但没有任何效果。@FlexMarket-您在该小提琴中有一个javascript错误（使用
=
而不是
=
进行评估），请注意控制台！感谢您提供这段代码，它在“运行代码片段”中工作得非常完美。然而，我仍然无法在我的网站上实现这一点。如果我犯了愚蠢的错误，我很抱歉，我只花了几个星期的时间编写代码。目前，我在JSFIDLE中将此作为我的代码，复制我的HTML和您的Javascript/JQuery:。Javascript/JQuery脚本在我的HTML中调用，位于：。它在JSFIDLE上不起作用，我在屏幕上看不到任何控制台错误。@FlexMarket您在该小提琴中有与我在ReferenceError之前指出的相同的错误消息：无效赋值左侧
if（parseInt（$（this）.attr（'data-temp'））=type）{
我终于找到了您看到错误的地方。似乎我忘了废弃一个仍在调用这些变量的旧Javascript/Jquery脚本。非常抱歉我的错误！代码终于可以在我的网站上正常工作了！非常感谢！很抱歉再次打扰您，但是我会使用相同的Javascript/Jquery代码影响其他用户吗选择？比如我可以选择“通用”吗？它会使整个“系列类型”部分变灰，然后根据“通用”使“电压”下的240V和480V也变灰选择？和往常一样，如果你有时间看的话，我的代码就在这里：@FlexMarket-你可以在每个函数中做任何你想做的事情。请看-我注释了一行并添加了一行，然后将你已经拥有的电压代码复制到该函数中。你可以开始编写可以调用的函数，而不是复制/粘贴代码，我将把它作为练习留给你；）