How do I write another item based on the selections of two interrelated drop-down menus?

advertisements

My example is here

As shown in the image

The values of the two dropdowns create either an acceptable or unacceptable situation. I'm not versed well enough in JS or JQ to figure out how to figure out how to get this working in an elegant manner. The results span doesn't have to be a span, it's just an indicator where the results need to go.

The trickiest part is that while in this example there are only 4 rows, they are NOT named uniquely because users can add an arbitrary number of rows which are all read into an array in the PHP back end. So, I have to work with this method.

I can kind of imagine a way that could identify the proper cell/span/etc since it sits in the very next TD, but I don't know how to do that, nor how to get dropdown 1 to work in conjunction with dropdown 2 without a lot of redundancy.

I am using jQuery for several things in this form as a whole, so I would presume that could make things a lot easier.

<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" />


Could you please take a look at below fiddle:

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

I created a JSON object representing risk matrix and utilized it on select boxes value change event as follows:

HTML Code:

<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>

One minor change in HTML as instead of id="result" I have given class="result" because all HTML elements should have unique id but multiple elements can have single class.

JQuery code:

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

});

By using jquery's $.closest() and $.find() we can find the associated select box and using combination of them we can get the result. I hope this will help you.