Dynamic pre-filled option selection with select2

0

I am trying to dynamically have options pre-selected in a select2 dropdown when changing my forum field. Usually to load a select2 pre-filled with options you would add the attribute "selected='selected'" to the option tag, but this fails to work when you are dynamically loading in options that are dependent of the selection of another select2 dropdown. Here is the code that renders 'topics' dependent upon 'forum'

function showForumTopics(forum){

    c.forumTopics = forum.topics;

    $('.cm-widget-post .cm-select2-topic .cm-select2').select2('destroy');

    var template = $compile('<option data-ng-value="topic.id" data-ng-repeat="topic in c.forumTopics">{{topic.name}}</option>')($scope);

    $(function () {

        $.extend($.fn.select2.defaults, {

            formatSelectionTooBig: function (limit) {

                return c.data.msg.topicLimitExceededMsg;

            }

        });



        $('.cm-widget-post .cm-select2-topic select.cm-select2').html(template).select2({

            minimumResultsForSearch: 10,

            maximumSelectionSize : c.data.maxTopicLimit

        });

    });



    $('#choose_topics_div').on('keydown',function(e){

        if($('#choose_topics').val() && c.data.maxTopicLimit<=$('#choose_topics').val().length){ 

            if((e.code || e.which) != 9){

                e.preventDefault();

            }

        }

    });

    try{$scope.$digest();}catch(e){}

    if(!c.showWidgetView) {

        if(c.forumTopics && c.forumTopics.length > 0)

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", false);

        else

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", true);

    }

}





function filterForums(){

    c.filteredForums = $filter('filter')(c.flatForumList, function(forum){

        var match = false;

        angular.forEach(forum.contents_allowed, function(content){

            if(content.id == contentType && content.access.indexOf('content_write') > -1){

                match = true;

                return;

            }               

        });

        return match;

    });



    $timeout(function(){

        $('.cm-widget-post .cm-select2-forum div.cm-select2').select2('destroy');

        var template = '<option value=""></option>'+

                '<option data-ng-if="c.showForumOption(forum)" data-ng-value="forum.sys_id" ' +

                'data-ng-repeat="forum in c.filteredForums">{{forum.name}}</option>';



        $('.cm-widget-post .cm-select2-forum select.cm-select2')

            .html($compile(template)($scope)).select2({minimumResultsForSearch: 10});       

        try{

            $scope.$digest();

        } catch(err) {

            console.error(err)

        }           



        $timeout(function(){

            if(preSelectedForumId){

                $('.cm-widget-post .cm-select2-forum .cm-select2')

                    .select2('val', preSelectedForumId)

                    .prop("disabled", true);

                if(c.data.topicsEnabled)

                    showForumTopics(preSelectedForum);

            }

        });



    });

}

and here is the front-end html code

<div class="col-xs-12 form-group cm-select2-forum padder-t" data-ng-if="!c.forumPage">

        <label for="choose_forum" class="control-label label-text padder-b-xs">${Forum}</label>

        <select id="choose_forum" class="cm-select2 forum-width" title="${Forum}" aria-required="true">

          <option value=""></option>

        </select>

      </div>

      <div id="choose_topics_div" class="col-xs-12 form-group cm-select2-topic padder-t" data-ng-if="c.data.topicsEnabled">

        <label for="choose_topics" class="control-label label-text padder-b-xs">${Topic(s)}</label><span class="text-optional">${ (optional)}</span>

        <select id="choose_topics" class="cm-select2" multiple="multiple" title="${Topics}">

          <option value=""></option>

        </select>

        <div class="note-text">{{c.data.msg.topicNoteMsg}}</div>

      </div>

jquery-select2 angularjs-select2

share|improve this question

asked Jan 2 at 16:29

JohnJohn

13

add a comment | 

0

I am trying to dynamically have options pre-selected in a select2 dropdown when changing my forum field. Usually to load a select2 pre-filled with options you would add the attribute "selected='selected'" to the option tag, but this fails to work when you are dynamically loading in options that are dependent of the selection of another select2 dropdown. Here is the code that renders 'topics' dependent upon 'forum'

function showForumTopics(forum){

    c.forumTopics = forum.topics;

    $('.cm-widget-post .cm-select2-topic .cm-select2').select2('destroy');

    var template = $compile('<option data-ng-value="topic.id" data-ng-repeat="topic in c.forumTopics">{{topic.name}}</option>')($scope);

    $(function () {

        $.extend($.fn.select2.defaults, {

            formatSelectionTooBig: function (limit) {

                return c.data.msg.topicLimitExceededMsg;

            }

        });



        $('.cm-widget-post .cm-select2-topic select.cm-select2').html(template).select2({

            minimumResultsForSearch: 10,

            maximumSelectionSize : c.data.maxTopicLimit

        });

    });



    $('#choose_topics_div').on('keydown',function(e){

        if($('#choose_topics').val() && c.data.maxTopicLimit<=$('#choose_topics').val().length){ 

            if((e.code || e.which) != 9){

                e.preventDefault();

            }

        }

    });

    try{$scope.$digest();}catch(e){}

    if(!c.showWidgetView) {

        if(c.forumTopics && c.forumTopics.length > 0)

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", false);

        else

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", true);

    }

}





function filterForums(){

    c.filteredForums = $filter('filter')(c.flatForumList, function(forum){

        var match = false;

        angular.forEach(forum.contents_allowed, function(content){

            if(content.id == contentType && content.access.indexOf('content_write') > -1){

                match = true;

                return;

            }               

        });

        return match;

    });



    $timeout(function(){

        $('.cm-widget-post .cm-select2-forum div.cm-select2').select2('destroy');

        var template = '<option value=""></option>'+

                '<option data-ng-if="c.showForumOption(forum)" data-ng-value="forum.sys_id" ' +

                'data-ng-repeat="forum in c.filteredForums">{{forum.name}}</option>';



        $('.cm-widget-post .cm-select2-forum select.cm-select2')

            .html($compile(template)($scope)).select2({minimumResultsForSearch: 10});       

        try{

            $scope.$digest();

        } catch(err) {

            console.error(err)

        }           



        $timeout(function(){

            if(preSelectedForumId){

                $('.cm-widget-post .cm-select2-forum .cm-select2')

                    .select2('val', preSelectedForumId)

                    .prop("disabled", true);

                if(c.data.topicsEnabled)

                    showForumTopics(preSelectedForum);

            }

        });



    });

}

and here is the front-end html code

<div class="col-xs-12 form-group cm-select2-forum padder-t" data-ng-if="!c.forumPage">

        <label for="choose_forum" class="control-label label-text padder-b-xs">${Forum}</label>

        <select id="choose_forum" class="cm-select2 forum-width" title="${Forum}" aria-required="true">

          <option value=""></option>

        </select>

      </div>

      <div id="choose_topics_div" class="col-xs-12 form-group cm-select2-topic padder-t" data-ng-if="c.data.topicsEnabled">

        <label for="choose_topics" class="control-label label-text padder-b-xs">${Topic(s)}</label><span class="text-optional">${ (optional)}</span>

        <select id="choose_topics" class="cm-select2" multiple="multiple" title="${Topics}">

          <option value=""></option>

        </select>

        <div class="note-text">{{c.data.msg.topicNoteMsg}}</div>

      </div>

jquery-select2 angularjs-select2

share|improve this question

asked Jan 2 at 16:29

JohnJohn

13

add a comment | 

0

0

0

I am trying to dynamically have options pre-selected in a select2 dropdown when changing my forum field. Usually to load a select2 pre-filled with options you would add the attribute "selected='selected'" to the option tag, but this fails to work when you are dynamically loading in options that are dependent of the selection of another select2 dropdown. Here is the code that renders 'topics' dependent upon 'forum'

function showForumTopics(forum){

    c.forumTopics = forum.topics;

    $('.cm-widget-post .cm-select2-topic .cm-select2').select2('destroy');

    var template = $compile('<option data-ng-value="topic.id" data-ng-repeat="topic in c.forumTopics">{{topic.name}}</option>')($scope);

    $(function () {

        $.extend($.fn.select2.defaults, {

            formatSelectionTooBig: function (limit) {

                return c.data.msg.topicLimitExceededMsg;

            }

        });



        $('.cm-widget-post .cm-select2-topic select.cm-select2').html(template).select2({

            minimumResultsForSearch: 10,

            maximumSelectionSize : c.data.maxTopicLimit

        });

    });



    $('#choose_topics_div').on('keydown',function(e){

        if($('#choose_topics').val() && c.data.maxTopicLimit<=$('#choose_topics').val().length){ 

            if((e.code || e.which) != 9){

                e.preventDefault();

            }

        }

    });

    try{$scope.$digest();}catch(e){}

    if(!c.showWidgetView) {

        if(c.forumTopics && c.forumTopics.length > 0)

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", false);

        else

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", true);

    }

}





function filterForums(){

    c.filteredForums = $filter('filter')(c.flatForumList, function(forum){

        var match = false;

        angular.forEach(forum.contents_allowed, function(content){

            if(content.id == contentType && content.access.indexOf('content_write') > -1){

                match = true;

                return;

            }               

        });

        return match;

    });



    $timeout(function(){

        $('.cm-widget-post .cm-select2-forum div.cm-select2').select2('destroy');

        var template = '<option value=""></option>'+

                '<option data-ng-if="c.showForumOption(forum)" data-ng-value="forum.sys_id" ' +

                'data-ng-repeat="forum in c.filteredForums">{{forum.name}}</option>';



        $('.cm-widget-post .cm-select2-forum select.cm-select2')

            .html($compile(template)($scope)).select2({minimumResultsForSearch: 10});       

        try{

            $scope.$digest();

        } catch(err) {

            console.error(err)

        }           



        $timeout(function(){

            if(preSelectedForumId){

                $('.cm-widget-post .cm-select2-forum .cm-select2')

                    .select2('val', preSelectedForumId)

                    .prop("disabled", true);

                if(c.data.topicsEnabled)

                    showForumTopics(preSelectedForum);

            }

        });



    });

}

and here is the front-end html code

<div class="col-xs-12 form-group cm-select2-forum padder-t" data-ng-if="!c.forumPage">

        <label for="choose_forum" class="control-label label-text padder-b-xs">${Forum}</label>

        <select id="choose_forum" class="cm-select2 forum-width" title="${Forum}" aria-required="true">

          <option value=""></option>

        </select>

      </div>

      <div id="choose_topics_div" class="col-xs-12 form-group cm-select2-topic padder-t" data-ng-if="c.data.topicsEnabled">

        <label for="choose_topics" class="control-label label-text padder-b-xs">${Topic(s)}</label><span class="text-optional">${ (optional)}</span>

        <select id="choose_topics" class="cm-select2" multiple="multiple" title="${Topics}">

          <option value=""></option>

        </select>

        <div class="note-text">{{c.data.msg.topicNoteMsg}}</div>

      </div>

jquery-select2 angularjs-select2

share|improve this question

asked Jan 2 at 16:29

JohnJohn

13

I am trying to dynamically have options pre-selected in a select2 dropdown when changing my forum field. Usually to load a select2 pre-filled with options you would add the attribute "selected='selected'" to the option tag, but this fails to work when you are dynamically loading in options that are dependent of the selection of another select2 dropdown. Here is the code that renders 'topics' dependent upon 'forum'

function showForumTopics(forum){

    c.forumTopics = forum.topics;

    $('.cm-widget-post .cm-select2-topic .cm-select2').select2('destroy');

    var template = $compile('<option data-ng-value="topic.id" data-ng-repeat="topic in c.forumTopics">{{topic.name}}</option>')($scope);

    $(function () {

        $.extend($.fn.select2.defaults, {

            formatSelectionTooBig: function (limit) {

                return c.data.msg.topicLimitExceededMsg;

            }

        });



        $('.cm-widget-post .cm-select2-topic select.cm-select2').html(template).select2({

            minimumResultsForSearch: 10,

            maximumSelectionSize : c.data.maxTopicLimit

        });

    });



    $('#choose_topics_div').on('keydown',function(e){

        if($('#choose_topics').val() && c.data.maxTopicLimit<=$('#choose_topics').val().length){ 

            if((e.code || e.which) != 9){

                e.preventDefault();

            }

        }

    });

    try{$scope.$digest();}catch(e){}

    if(!c.showWidgetView) {

        if(c.forumTopics && c.forumTopics.length > 0)

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", false);

        else

            $('.cm-widget-post .cm-select2-topic .cm-select2').prop("disabled", true);

    }

}





function filterForums(){

    c.filteredForums = $filter('filter')(c.flatForumList, function(forum){

        var match = false;

        angular.forEach(forum.contents_allowed, function(content){

            if(content.id == contentType && content.access.indexOf('content_write') > -1){

                match = true;

                return;

            }               

        });

        return match;

    });



    $timeout(function(){

        $('.cm-widget-post .cm-select2-forum div.cm-select2').select2('destroy');

        var template = '<option value=""></option>'+

                '<option data-ng-if="c.showForumOption(forum)" data-ng-value="forum.sys_id" ' +

                'data-ng-repeat="forum in c.filteredForums">{{forum.name}}</option>';



        $('.cm-widget-post .cm-select2-forum select.cm-select2')

            .html($compile(template)($scope)).select2({minimumResultsForSearch: 10});       

        try{

            $scope.$digest();

        } catch(err) {

            console.error(err)

        }           



        $timeout(function(){

            if(preSelectedForumId){

                $('.cm-widget-post .cm-select2-forum .cm-select2')

                    .select2('val', preSelectedForumId)

                    .prop("disabled", true);

                if(c.data.topicsEnabled)

                    showForumTopics(preSelectedForum);

            }

        });



    });

}

and here is the front-end html code

<div class="col-xs-12 form-group cm-select2-forum padder-t" data-ng-if="!c.forumPage">

        <label for="choose_forum" class="control-label label-text padder-b-xs">${Forum}</label>

        <select id="choose_forum" class="cm-select2 forum-width" title="${Forum}" aria-required="true">

          <option value=""></option>

        </select>

      </div>

      <div id="choose_topics_div" class="col-xs-12 form-group cm-select2-topic padder-t" data-ng-if="c.data.topicsEnabled">

        <label for="choose_topics" class="control-label label-text padder-b-xs">${Topic(s)}</label><span class="text-optional">${ (optional)}</span>

        <select id="choose_topics" class="cm-select2" multiple="multiple" title="${Topics}">

          <option value=""></option>

        </select>

        <div class="note-text">{{c.data.msg.topicNoteMsg}}</div>

      </div>

jquery-select2 angularjs-select2

jquery-select2 angularjs-select2

share|improve this question

asked Jan 2 at 16:29

JohnJohn

13

share|improve this question

asked Jan 2 at 16:29

JohnJohn

13

share|improve this question

share|improve this question

asked Jan 2 at 16:29

JohnJohn

13

asked Jan 2 at 16:29

JohnJohn

13

asked Jan 2 at 16:29

JohnJohn

13

13

add a comment | 

add a comment | 

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009840%2fdynamic-pre-filled-option-selection-with-select2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

active

oldest

votes

active

oldest

votes

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009840%2fdynamic-pre-filled-option-selection-with-select2%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here