Select2 multi-select with Dependant Questions

Divs show/hide depending on which options are selected.

by Puddster

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<select id="ctl00_ContentPlaceHolder1_lbS1Unit" class="" multiple="multiple" name="ctl00$ContentPlaceHolder1$lbS1Unit" size="4" style="width: 100%;">
    <option value="0">[Please Select Units]</option>
    <option value="1">1|0|1|0|1|0|1|0|Uses Questions 1, 3, 5, 7</option>
    <option value="2">0|1|0|1|0|1|0|1|Uses Questions 2, 4, 6, 8</option>
    <option value="3">1|1|1|0|0|0|0|0|Uses Questions 1, 2, 3</option>
    <option value="4">0|0|0|1|1|0|0|0|Uses Questions 4, 5</option>
    <option value="5">0|0|0|0|0|1|1|1|Uses Questions 6, 7, 8</option>
    <option value="6">0|0|0|0|0|0|0|0|Uses No Questions</option>
    <option value="7">1|1|1|1|1|1|1|1|Uses All Questions</option>
</select>
<div id="rows">
    <div style="display: none;">1: Question 1</div>
    <div style="display: none;">2: Question 2</div>
    <div style="display: none;">3: Question 3</div>
    <div style="display: none;">4: Question 4</div>
    <div style="display: none;">5: Question 5</div>
    <div style="display: none;">6: Question 6</div>
    <div style="display: none;">7: Question 7</div>
    <div style="display: none;">8: Question 8</div>
</div>

JavaScript

$("[id*=lbS1Unit]").select2({
    formatResult: function (unit) {
        var splitString = unit.text.split("|");
        return splitString[splitString.length - 1];
    },
    formatSelection: function (unit) {
        var splitString = unit.text.split("|");
        return splitString[splitString.length - 1];
    }
}).on("change", function () {
    var theOptions = $("[id*=lbS1Unit]").select2("data"),
        theSelected = $("[id*=lbS1Unit]").select2("val"),
        theRows = $("#rows").children("div").delay(500).slideUp();
    $(theOptions).each(function (oIndex, obj) {
        var theQuestionSet = obj.text.split("|");
        $(theRows).each(function (index) {
            if (theQuestionSet[index] === "1") {
                $(theRows).eq(index).finish().slideDown();
            }
        });
    });
});