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

【问题标题】：Display options in a drop-down based on what is selected in another drop-down根据在另一个下拉列表中选择的内容在下拉列表中显示选项
【发布时间】：2013-11-12 17:03:25
【问题描述】：

我想根据已在另一个下拉菜单中选择的内容在下拉菜单中显示选项。我在第一个下拉列表中有 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>

我想根据为“失败原因”选择的内容在此下拉列表中显示不同的选项：

<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="3">Reinstalled Software</option>
                    <option value="4">Replaced Loadcell</option>
                    <option value="5">Replaced SUT</option>
                </select>
                <!-- Put in options for Solution Id -->
            </div>

我见过其他示例，但与我想要实现的目标完全不同。我需要能够获得显示并选择在我的 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>

【问题讨论】：

stackoverflow 里面有很多相关的问题，google一下就行了。
我已经有了，但是没有一个显示如何在第二个下拉菜单中选择它时获取该选项的值。
你对 javascript/jQuery 的了解如何？所以我可以根据你的知识写答案...
我已经使用了大约两三个月了。我来自java背景，所以我可以很容易地弄清楚大多数事情。为什么？
只需使用许多链式选择插件中的任何一个。 google.com/search?q=chained+selects+jquery

标签： javascript jquery html drop-down-menu

【解决方案1】：

在第一个下拉菜单中使用.change 事件，获取值，然后做你需要的事情：

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

【讨论】：

我可以很容易地从第一个获得价值。我需要从第二个中获取值，即在选择第一个选项后，选项会显示在第二个中。然后我需要获取为第二个选项选择的选项的值。
@user2932418 -- 已更新。
感谢您的回复，现在将测试并告知您是否有效。

【解决方案2】：

JS 小提琴解决方案：

http://jsfiddle.net/ZjhWV/1/

不是最好的解决方案，但可行的解决方案。从第一个选择中创建一些文本内容列表，并将它们与第二个选择的可用选项链接。

我使用了第一个中的 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();
    }
});

编辑：我的解决方案只是一个简短的版本。它仅在您更改第一个选择时才有效，并且不会影响当前选择的选项。但我相信你可以自己解决这个问题 ;)

【讨论】：

【解决方案3】：

首先你必须定义组合。

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

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

JSFiddle： http://jsfiddle.net/2hwp9/

【讨论】：

您是否有机会提供一个有效的 jsfiddle，以便我可以更清楚地看到您的解决方案是如何工作的？提前致谢
@user2932418 绝对是，刚刚编辑了我的答案。链接在底部。我误解了这个问题，所以我还添加了一个 div 以在从第二个下拉列表中选择一个选项时显示文本。

【解决方案4】：

希望您已经得到答案，但答案很简单。检查这篇文章我没有评论的声誉，所以发布为答案。检查这个答案，它很好而且很清楚。

Javascript change drop-down box options based on another drop-down box value

【讨论】：