0

I have been trying to dynamically disable couple of options in a dynamically generated jQuery Select2 based on an option selected on another Select2. I have tried couple of suggestions out there, but couldn't succeed.

This one (how to let jquery select2 disable one option dynamically?) was the closest, but again, in my case I do not already have the <select> with options written but is generated on-the-fly.

The value and text for options is pulled from a table and will change with time, so prefer to implement the current way (not as in the above link). If this is not at all possible then maybe {{templating}} maybe the last resort. Example code below, I have also put a demo here: http://jsfiddle.net/s_j_l/gqbzh5y0/23/

HTML:

User Roles:
<div id="userr"></div>
Quarters:
<div id="qtr"></div>

JS:

$("#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) {});
});

DATA:

{"userroles":[{"roleid":"admin","role":"Admin"},{"roleid":"user","role":"User"},{"roleid":"audit","role":"Audit"},{"roleid":"client","role":"Client"}],"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"}]}
Community
  • 1
  • 1
SJL
  • 215
  • 3
  • 11
  • so, depending on the user selection, you want to choose which quarter will be displayed? what are criteria? – HelpNeeder Sep 06 '14 at 08:37
  • @HelpNeeder: yes in this example, if one selects "User" under User Roles, the "2013 Q4" option in Quarter, should be disabled. Thanks! – SJL Sep 06 '14 at 08:39
  • Would it be a problem if you could separate quarters by having multiple objects per user type? just asking. – HelpNeeder Sep 06 '14 at 08:42
  • I wouldn't mind if there is a better option, but would appreciate if you could include the code..basically looking for an option requiring minimal code changes – SJL Sep 06 '14 at 08:49
  • @HelpNeeder: Just an FYI, the above is an example and in the live application there are a few more Select2 which would either be disabled/enabled and additionally in a couple of Select2 only some of the options will be disabled/enabled (this is where I'm stuck). – SJL Sep 06 '14 at 09:21

1 Answers1

1

OK, I have tried and failed make working code.

The heory is, that in line:

    if (e.val == 'user') $("#qtr").find('option[value="2013Q4"]').attr('disabled', 'disabled');

You could instead of copy this array, make it into an object, and then remove a value with needed value. Then, turn it back to json when finished.

Adding/removing items from JSON data with JQuery

Community
  • 1
  • 1
HelpNeeder
  • 6,383
  • 24
  • 91
  • 155
  • Thanks for the suggestion, I did think about that earlier, but the users using the application need to know that there are more options available (but disabled if the set criteria is false) that's why we had to look at this option. – SJL Sep 06 '14 at 09:29