Javascript 如何根据两个相互依赖的下拉列表的选择编写另一个元素？

如图所示

这两个下拉列表的值创建可接受或不可接受的情况。我对JS或JQ还不够精通，不知道如何让它以优雅的方式工作。结果跨度不一定是一个跨度，它只是一个指标，表明结果需要去哪里

最棘手的部分是，虽然在本例中只有4行，但它们的名称不是唯一的，因为用户可以添加任意数量的行，这些行都被读入PHP后端的数组中。所以，我必须使用这种方法

我可以想象一种方法，可以识别正确的小区/span/etc，因为它位于下一个TD中，但我不知道如何做到这一点，也不知道如何让下拉列表1与下拉列表2一起工作，而不会有太多冗余

我将jQuery作为一个整体用于此表单中的一些内容，因此我认为这会使事情变得更简单

<style>
td {
    vertical-align: top;
    text-align: left;
    padding: 12px;
    border: 1px solid black;
}
span.unacceptable {
    color: firebrick;
    font-weight: bold;
}
span.acceptable {
    color: forestgreen;
    font-weight: normal;
}</style>

<script>
var unacceptable = "<span class=\"unacceptable\" id=\"unacceptable\"><input name=\"risks[raw-risk-riskestimate][]\" size=\"10\" value=\"Unacceptable\" type=\"hidden\">Unacceptable<\/span>";
var acceptable = "<span class=\"acceptable\" id=\"acceptable\"><input name=\"risks[raw-risk-riskestimate][]\" size=\"10\" value=\"Acceptable\" type=\"hidden\">Acceptable<\/span>\r\n";
</script>

<table>
    <tr>
        <td>Severity
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span id="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span id="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probablity:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span id="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span id="result">Result</span>

        </td>
    </tr>
</table>
<img src="http://i.imgur.com/Vup31U9.png" />

运输署{
垂直对齐：顶部；
文本对齐：左对齐；
填充：12px；
边框：1px纯黑；
}
span.不可接受{
颜色：耐火砖；
字体大小：粗体；
}
span.可接受{
颜色：森林绿；
字体大小：正常；
}
var unacceptable=“unacceptable”；
var acceptable=“acceptable\r\n”；
严重程度
选一个
可以忽略不计的
少数的
严肃的
批评的
灾难性的



概率：
选一个
频繁的
可能的
偶然的
遥远的
难以想象的
结果
严重程度：
选一个
可以忽略不计的
少数的
严肃的
批评的
灾难性的



概率：
选一个
频繁的
可能的
偶然的
遥远的
难以想象的
结果
严重程度：
选一个
可以忽略不计的
少数的
严肃的
批评的
灾难性的



概率：
选一个
频繁的
可能的
偶然的
遥远的
难以想象的
结果
严重程度：
选一个
可以忽略不计的
少数的
严肃的
批评的
灾难性的



概率：
选一个
频繁的
可能的
偶然的
遥远的
难以想象的
结果

更新：这里有一个更新，有多组下拉列表

---

下面是一个使用2D数组存储可能结果的解决方案。然后将两个

的值用作索引以获得结果

HTML:

---

这是一把。

你能看看下面的小提琴吗：

我创建了一个代表风险矩阵的JSON对象，并将其用于

select

box值更改事件，如下所示：

HTML代码：

<table>
    <tr>
        <td>Severity
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probablity:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
</table>

var unacceptable = "<span class=\"unacceptable\" id=\"unacceptable\"><input name=\"risks[raw-risk-riskestimate][]\" size=\"10\" value=\"Unacceptable\" type=\"hidden\">Unacceptable<\/span>";
var acceptable = "<span class=\"acceptable\" id=\"acceptable\"><input name=\"risks[raw-risk-riskestimate][]\" size=\"10\" value=\"Acceptable\" type=\"hidden\">Acceptable<\/span>\r\n";

var riskMatrix = {
    "Negligible" : {
        "Frequent": "Unacceptable",
        "Probable": "Acceptable",
        "Occasional": "Acceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Minor" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Acceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Serious" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Acceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Critical" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Unacceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Catastrophic" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Unacceptable",
        "Remote": "Unacceptable",
        "Inconceivable": "Acceptable"
    }   
};

$(document).ready(function(){
    $(document).on("change", "select[name*=raw-risk-severityharm], select[name*=raw-risk-probability]",function(){
        var currentTrElem = $(this).closest("tr");
        var selectName = $(this).attr("name");
        var currentSeverityharm = null;
        var currentProbability = null;
        var currentResultTD = currentTrElem.find(".result").closest("td");
        var bothSelectChosen = false;

        if(selectName.indexOf("raw-risk-severityharm") > -1)
        {
            currentSeverityharm = $(this).val();
            currentProbability = currentTrElem.find("select[name*=raw-risk-probability]").val();
        }
        else
        {
            currentProbability = $(this).val();
            currentSeverityharm = currentTrElem.find("select[name*=raw-risk-severityharm]").val();
        }


        if(currentSeverityharm != "badselection" && currentProbability != "badselection")
        {
            bothSelectChosen = true;
        }

        if(bothSelectChosen)
        {
            currentResultTD.empty().html('<span class="result">Result</span>');
            var currentResult = riskMatrix[currentSeverityharm][currentProbability];
            if(currentResult == "Unacceptable")
            {
                currentResultTD.append("<br/>"+unacceptable);
            }
            else if(currentResult == "Acceptable")
            {
                 currentResultTD.append("<br/>"+acceptable);
            }
        }
        else
        {
            currentResultTD.empty().html('<span class="result">Result</span>');
        }
    });

});

---

通过使用jquery的

$.closest（）

和

$.find（）

我们可以找到相关的选择框，并使用它们的组合来获得结果。我希望这会对您有所帮助。

您是否有JavaScript数组或JSON对象形式的风险矩阵…？vijayP：没有，但我认为这很容易做到？这张图片就是一个例子。我甚至不知道我该怎么做。我的JS技能不强。这里有一个文本的粘贴箱：谢谢你的回复。但是，如果有多对下拉列表（如示例中所示），则此操作将失败。所有结果最终都会被更新，而不是一次更新一个。这是我正在努力解决的核心问题，我不确定如何在每个选择中获得正确的元素。@GreyHodge对于多组下拉列表，您需要遍历DOM并指定相互关联的元素。请看我答案顶部的更新。我看到了，明天我会进一步测试，但现在，它看起来很棒。顺便说一句，你并没有给一个人一条鱼，我通过拆开一些有用的东西，比如你的代码，学到了最好的东西。你给了我一条鱼，但我看到了你是如何建造杆子的，所以我可以自己钓，或者至少试试。：）哇，太棒了，我的朋友。我昨天没能回来，但这，这是惊人的和完美的。不仅如此，我现在更清楚地了解了整个情况。我非常感激。

<table>
    <tr>
        <td>Severity
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probablity:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
    <tr>
        <td>Severity:&nbsp;
            <select name="risks[raw-risk-severityharm][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Negligible">Negligible</option>
                <option value="Minor">Minor</option>
                <option value="Serious">Serious</option>
                <option value="Critical">Critical</option>
                <option value="Catastrophic">Catastrophic</option>
            </select>
            <br>
            <br>Probability:&nbsp;
            <select name="risks[raw-risk-probability][]">
                <option value="badselection" selected="true" disabled="disabled">Choose One</option>
                <option value="Frequent">Frequent</option>
                <option value="Probable">Probable</option>
                <option value="Occasional">Occasional</option>
                <option value="Remote">Remote</option>
                <option value="Inconceivable">Inconceivable</option>
            </select>
        </td>
        <td> <span class="result">Result</span>

        </td>
    </tr>
</table>

var unacceptable = "<span class=\"unacceptable\" id=\"unacceptable\"><input name=\"risks[raw-risk-riskestimate][]\" size=\"10\" value=\"Unacceptable\" type=\"hidden\">Unacceptable<\/span>";
var acceptable = "<span class=\"acceptable\" id=\"acceptable\"><input name=\"risks[raw-risk-riskestimate][]\" size=\"10\" value=\"Acceptable\" type=\"hidden\">Acceptable<\/span>\r\n";

var riskMatrix = {
    "Negligible" : {
        "Frequent": "Unacceptable",
        "Probable": "Acceptable",
        "Occasional": "Acceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Minor" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Acceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Serious" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Acceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Critical" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Unacceptable",
        "Remote": "Acceptable",
        "Inconceivable": "Acceptable"
    },
    "Catastrophic" : {
        "Frequent": "Unacceptable",
        "Probable": "Unacceptable",
        "Occasional": "Unacceptable",
        "Remote": "Unacceptable",
        "Inconceivable": "Acceptable"
    }   
};

$(document).ready(function(){
    $(document).on("change", "select[name*=raw-risk-severityharm], select[name*=raw-risk-probability]",function(){
        var currentTrElem = $(this).closest("tr");
        var selectName = $(this).attr("name");
        var currentSeverityharm = null;
        var currentProbability = null;
        var currentResultTD = currentTrElem.find(".result").closest("td");
        var bothSelectChosen = false;

        if(selectName.indexOf("raw-risk-severityharm") > -1)
        {
            currentSeverityharm = $(this).val();
            currentProbability = currentTrElem.find("select[name*=raw-risk-probability]").val();
        }
        else
        {
            currentProbability = $(this).val();
            currentSeverityharm = currentTrElem.find("select[name*=raw-risk-severityharm]").val();
        }


        if(currentSeverityharm != "badselection" && currentProbability != "badselection")
        {
            bothSelectChosen = true;
        }

        if(bothSelectChosen)
        {
            currentResultTD.empty().html('<span class="result">Result</span>');
            var currentResult = riskMatrix[currentSeverityharm][currentProbability];
            if(currentResult == "Unacceptable")
            {
                currentResultTD.append("<br/>"+unacceptable);
            }
            else if(currentResult == "Acceptable")
            {
                 currentResultTD.append("<br/>"+acceptable);
            }
        }
        else
        {
            currentResultTD.empty().html('<span class="result">Result</span>');
        }
    });

});