jQuery Select2 & JSON

Dynamically generated jQuery select2 options to be dynamically disabled based on event

by s_j_l

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
Userroles:
<div id="userr"></div>Quarters:
<div id="qtr"></div>

JavaScript

$(function () {
    var userroles = [{
        "roleid": "admin",
            "role": "Admin"
    }, {
        "roleid": "user",
            "role": "User"
    }, {
        "roleid": "audit",
            "role": "Audit"
    }, {
        "roleid": "client",
            "role": "Client"
    }];

    var quarters = [{
        "qid": "2014Q3",
            "quarter": "2014 Q3"
    }, {
        "qid": "2014Q2",
            "quarter": "2014 Q2"
    }, {
        "qid": "2014Q1",
            "quarter": "2014 Q1"
    }, {
        "qid": "2013Q4",
            "quarter": "2013 Q4"
    }, {
        "qid": "2013Q3",
            "quarter": "2013 Q3"
    }, {
        "qid": "2013Q2",
            "quarter": "2013 Q2"
    }, {
        "qid": "2013Q1",
            "quarter": "2013 Q1"
    }, {
        "qid": "2012Q4",
            "quarter": "2012 Q4"
    }, {
        "qid": "2012Q3",
            "quarter": "2012 Q3"
    }, {
        "qid": "2012Q2",
            "quarter": "2012 Q2"
    }, {
        "qid": "2012Q1",
            "quarter": "2012 Q1"
    }];

    $("#userr").select2({
        data: _.map(userroles, function (json) {
            return {
                id: json.roleid,
                text: json.role
            }
        }),
        placeholder: 'Select User Role',
        allowClear: true,
        containerCssClass: 'select-block-level'
    }).on('change', function (e) {
        if (e.val == 'user') $("#qtr").find('option[value="2013Q4"]').attr('disabled', 'disabled');
    });

    $("#qtr").select2({
        data: _.map(quarters, function (json) {
            return {
                id: json.qid,
                text: json.quarter
            }
        }),
        placeholder: 'Select Quarters',
        allowClear: true,
        containerCssClass: 'select-block-level'
    }).on('change', function (e) {});
});