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

时间：2015-10-26 09:14:14

标签： javascript jquery

My example is here

如图像enter image description here

所示

两个下拉列表的值会产生可接受或不可接受的情况。我在JS或JQ中并不熟悉如何弄清楚如何以优雅的方式使用它。结果跨度不一定是跨度，它只是结果需要的指标。

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

我可以想象一种方法可以识别正确的细胞/跨度/等因为它位于下一个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" />

2 个答案:

答案 0 :(得分：1)

更新：这是一个更新的jsFiddle，有多组下拉列表。

这是使用2D数组存储可能结果的解决方案。然后将两个<select>的值用作索引以获得结果。

HTML：

<div>
    Severity:
    <select class="severity">
        <option disabled selected>Choose severity</option>
        <option value="0">Negligible</option>
        <option value="1">Minor</option>
        <option value="2">Serious</option>
    </select>
</div>
<div>
    Probability:
    <select class="probability">
        <option disabled selected>Choose probability</option>
        <option value="0">Frequent</option>
        <option value="1">Probably</option>
        <option value="2">Occasional</option>
    </select>
</div>
<div class="result"></div>

JS（使用jQuery）：

var table = [
    ['Unacceptable','Unacceptable','Unacceptable'],
    ['Unacceptable','Unacceptable','Acceptable'],
    ['Unacceptable','Acceptable','Acceptable'],
];

$('.severity').on('change', function() {
    var severValue = $(this).val();
    var probValue = $('.probability').val();
    if (severValue && probValue) {
        $('.result').html(table[severValue][probValue]);
    }
});

$('.probability').on('change', function() {
    var severValue = $('.severity').val();
    var probValue = $(this).val();
    if (severValue && probValue) {
        $('.result').html(table[severValue][probValue]);
    }
});

这是一个jsFiddle。

答案 1 :(得分：1)

请你看看下面的小提琴：

http://jsfiddle.net/vijayP/68fwcxeb/3/

我创建了一个表示风险矩阵的JSON对象，并在select框值变更事件中使用它，如下所示：

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>

HTML中的一个小变化而不是id="result"我已经class="result"，因为所有HTML元素都应该具有唯一id，但多个元素可以包含class。

JQuery代码： 

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＆＃39; $.closest()和$.find()，我们可以找到关联的选择框，并使用它们的组合我们可以得到结果。我希望这会对你有所帮助。

相关问题
最新问题