Using Select2 with dependent selectors

Two select components, the second component depend on the first selector

by Daniel Mejia

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<div id="main">
    <form id="test" class="block-inline">
        <select id="selector1" class="form-control">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
        <select id="selector2" class="form-control">
            <option value="1" class="conditional 1">Sub-Option 1.1</option>
            <option value="2" class="conditional 1">Sub-Option 1.2</option>
            <option value="3" class="conditional 1">Sub-Option 1.3</option>
            <option value="4" class="conditional 2">Sub-Option 2.1</option>
            <option value="5" class="conditional 2">Sub-Option 2.2</option>
            <option value="6" class="conditional 2">Sub-Option 2.3</option>
            <option value="7" class="conditional 3">Sub-Option 3.1</option>
            <option value="8" class="conditional 3">Sub-Option 3.2</option>
            <option value="9" class="conditional 4">Sub-Option 4.1</option>
        </select>
    </form>
</div>

CSS

#main {
    width=100%;
    background-color:#aaaaff;
    height:100px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    padding:10px;
}
.form-control {
    width:35%;
}

JavaScript

$(document).ready(function () {
    $option = 1;
    $selector1 = $("select#selector1");
    $selector2 = $("select#selector2");

    $selector1.select2({
        placeholder: 'Select an option'
    });
    

    $selector2.select2({
        placeholder: 'Select a sub-option',
        matcher: function (params, data) {
            if (data.element.className == "conditional " + $option && (data.text.indexOf(params.term) > -1 || params.term == null)) {
                return data;
            }
            return null;
        }
    });

    $selector1.on('change', function (e) {
        $option = e.target.value;
        <!--Select the first coincidence of the match-->
        $options=$selector2.children('option[class="conditional '+$option+'"]');
        if($options.length>0){
            $($options[0]).attr('selected','selected');
            $selector2.trigger('change');
        }else{
            $selector2.select2('val','');
        }
    });
});