Javascript 根据在另一个下拉列表中选择的内容在下拉列表中显示选项

我想根据另一个下拉菜单中已选择的内容在下拉菜单中显示选项。我在第一个下拉列表中有16个选项，因此我想在第二个下拉列表中为第一个选项中的每个选项显示不同的选项。我想使用javascript或jquery来实现这一点

以下是我的html文件中的第一个下拉列表：

           <div>
               <label for="failureReason">Failure Reason:</label> <select
                    id="failureReason" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                    <option value="1">Damage</option>
                    <option value="9">Calibration Failure</option>
                    <option value="5">Component Failure</option>
                    <option value="93">Customer Request</option>
                    <option value="5">Error on Potted SUT</option>
                    <option value="41">Installation Error</option>
                    <option value="6">Interference</option>
                    <option value="46">Network Issue</option>
                    <option value="3">No Fault Found</option>
                    <option value="8">No Power/Fuse Blown</option>
                    <option value="23">Non-AMCS Issue</option>
                    <option value="49">OBC HW Issue</option>
                    <option value="30">OBC SW Issue</option>
                    <option value="2">Training Issue</option>
                    <option value="68">Truck Not Available</option>
                    <option value="51">Routine Maintenance</option>
                </select>
                <!-- Put in options for failure reason -->
            </div>

故障原因：
损坏
校准失败
部件故障
客户要求
封装SUT上的错误
安装错误
干扰
网络问题
没有发现故障
没有电源/保险丝熔断
非资产管理公司发行
OBC硬件问题
OBC软件问题
培训问题
卡车不可用
日常维护

我想在此下拉列表中显示不同的选项，具体取决于为“故障原因”选择的选项：

解决方案Id：
修复
重新启动
重新安装的软件
更换称重传感器
替换SUT

我见过其他的例子，但与我试图实现的目标完全不同。我需要能够获得所显示和选择的任何选项的“值”，以便在javascript文件的其他部分中使用

编辑：

我意识到我的问题有点让人困惑。我会尽量弄清楚的。 如果由于故障原因选择了“损坏”，我想显示：

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="3">Reinstalled Software</option>
                <option value="4">Replaced Loadcell</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="2">Restarted</option>
                <option value="5">Replaced SUT</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>

解决方案Id：
修复
重新安装的软件
更换称重传感器

但如果选择了“校准失败”，我想显示：

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="3">Reinstalled Software</option>
                <option value="4">Replaced Loadcell</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="2">Restarted</option>
                <option value="5">Replaced SUT</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>

解决方案Id：
修复
重新启动
替换SUT

在第一个下拉列表中使用

.change

事件，获取值，然后执行所需操作：

$("#failureReason").change(function() {
    var selected = this.value;
    var second = $("#solutionId option:selected").val();
});

JS fiddle解决方案：

这不是最好的解决方案，而是可行的解决方案。从第一个选项中列出一些文本内容，并将它们与第二个选项中的可用选项链接起来

我使用了第一个中的textContent，并将其与第二个中的选项值相链接。但您可以根据选项的不同属性（id、值、文本内容…）创建链接

您可以使用

this.options[this.selectedIndex].textContent从当前选定的选项中获取文本内容

PS：如果数组为空，则所有选项都可用

javascript:

    var subselectContains = {
    "Damage": [1, 3, 5],
        "Calibration Failure": [],
        "Component Failure": [2],
        "Customer Request": [],
        "Error on Potted SUT": [1],
        "Installation Error": [],
        "Interference": [],
        "Network Issue": [],
        "No Fault Found": [],
        "No Power/Fuse Blown": [],
        "Non-AMCS Issue": [],
        "OBC HW Issue": [],
        "OBC SW Issue": [],
        "Training Issue": [],
        "Truck Not Available": [],
        "Routine Maintenance": []
};

var failureReson = $("#failureReason");
var solutionOptions = $("#solutionId option");


failureReson.change(function () {
    var visibleOptions = subselectContains[this.options[this.selectedIndex].textContent];

    if (visibleOptions.length != 0) {
        solutionOptions.hide();


        solutionOptions.each(function () {
            for (var i = 0; i <= visibleOptions.length; i++) {
                if (this.value == visibleOptions[i]) {
                    $(this).show();
                }
            }
        });
    } else {
        solutionOptions.show();
    }
});

var subselectContains={
“损害”：[1,3,5]，
“校准失败”：[]，
“组件故障”：[2]，
“客户请求”：[]，
“封装SUT错误”：[1]，
“安装错误”：[]，
“干扰”：[]，
“网络问题”：[]，
“未发现故障”：[]，
“无电源/保险丝熔断”：[]，
“非资产管理公司发行”：[]，
“OBC硬件问题”：[]，
“OBC软件问题”：[]，
“培训问题”：[…]，
“卡车不可用”：[]，
“日常维护”：[]
};
var failureReson=$（“#failureReson”）；
var solutionOptions=$（“#solutionId选项”）；
故障原因更改（功能（）{
var visibleOptions=subselectContains[this.options[this.selectedIndex].textContent]；
如果（visibleOptions.length！=0）{
solutionOptions.hide（）；
解决方案选项。每个（函数（）{
对于（var i=0；i，首先必须定义组合

var combinations = {
    "option1": ["option1-a", "option1-b", "option1-c"],
    "option2": ["option2-a", "option2-b", "option2-c"],
    "option3": ["option3-a", "option3-b", "option3-c"]
}

因此，在第一个下拉列表中，您将添加一个查找新值的
.change
事件，然后用这些选项填充第二个下拉列表

$('#failureReason').change(function(){
    var template = '<option>Solutions</option>';  // will hold html for second drop down.

    solutions = combinations[$(this).val()];
    $.each(solutions, function(i, solution){
        template += '<option value="' + solution + '">' + solution + '</option>'
    });

    $('#solutionId').html(template);
});

$（'#failureReason'）。更改（函数（）{
var template='Solutions'；//将保存第二个下拉列表中的html。
解决方案=组合[$（this）.val（）]；
$。每个（解决方案、功能（i、解决方案）{
模板+=''+解决方案+''
});
$（'#solutionId'）.html（模板）；
});

如果您注意到，我只是给每个选项指定了与显示的文本相同的值。给每个选项指定一个自定义值是相当简单的

JSFiddle：
希望你已经得到答案，但答案很简单。查看此帖子我没有声誉评论，所以将其作为答案发布。查看此答案很好，很清楚

stackoverflow中有太多相关的问题。只要用谷歌搜索一下就可以了。我已经搜索过了，但没有显示如何在选择第二个下拉列表中显示选项时获取该选项的值。javascript/jQuery的使用情况如何？因此我可以根据您的知识编写答案……我已经使用了大约两三个月了。我来自java背景，所以我可以很容易地弄明白大多数事情。为什么？只要使用许多链式选择插件中的任何一个。我可以很容易地从第一个插件中获取值。我需要从第二个插件中获取值，也就是说，在为第一个插件选择了一个选项后，第二个插件中会显示选项。然后我需要获取为第二个插件选择的选项的值r第二个。@user2932418--已更新。感谢您的响应，我们将立即进行测试，并让您知道它是否有效。您是否有可能提供一个有效的JSFIDLE，以便我可以更清楚地了解您的解决方案的工作原理？谢谢advance@user2932418当然，刚刚编辑了我的答案。链接在底部。我误解了这个问题，所以我也添加了一个div，以便在从第二个下拉列表中选择选项时显示文本。