Example useage of Select2 to add and edit multiple activities to user. This gives freedom of dynamic communication and action plans that can be quickly edited and customized on a user by user basis.
A Pen by John Bocook on CodePen.
Created
July 20, 2017 18:08
-
-
Save johnbocook/3faad85536a410306b753fc6338c4c36 to your computer and use it in GitHub Desktop.
Select2 Demo - Dynamic Work Tasks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Select2 Demo - Dynamic Work Tasks</title< | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="//cdn.jsdelivr.net/alertifyjs/1.10.0/css/alertify.min.css" rel="stylesheet" /> | |
| <link href="//cdn.jsdelivr.net/alertifyjs/1.10.0/css/themes/default.min.css" rel="stylesheet" /> | |
| <link href="//cdn.jsdelivr.net/alertifyjs/1.10.0/css/themes/semantic.min.css" rel="stylesheet" /> | |
| <link href="//cdn.jsdelivr.net/alertifyjs/1.10.0/css/themes/bootstrap.min.css" rel="stylesheet" /> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> | |
| <script src="//cdn.jsdelivr.net/alertifyjs/1.10.0/alertify.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row full"> | |
| <h4 class="title">Activity Add Examples</h4> | |
| </div> | |
| <div class="row bg content"> | |
| <div class="col-md-1"> | |
| </div> | |
| <div class="col-md-4 bg"> | |
| <select class="progControlSelect2" multiple="true"> | |
| <option value="aa">Phone Call 1</option> | |
| <option value="ab">Phone Call 2</option> | |
| <option value="ac">Email 1</option> | |
| <option value="ad">Email 2</option> | |
| <option value="ae">Text Message</option> | |
| <option value="af">Follow Up Call</option> | |
| <option value="ag">Finialize Grades</option> | |
| <option value="ah">Update Cohort</option> | |
| <option value="ai">Register Courses</option> | |
| <option value="aj">Something Else</option> | |
| <option value="ak">Options are limitless!!!</option> | |
| </select> | |
| <input type="button" class="btn btn-success btn-sm Submit" value="Submit"> | |
| <input type="button" class="btn btn-danger btn-sm clearSelect2" value="Clear"> | |
| </div> | |
| <div class="col-md-4 bg"> | |
| <input type="button" class="btn btn-primary btn-sm AGSPlan " value="Add AGS Recruitment Plan"> | |
| <input type="button" class="btn btn-primary btn-sm TradPlan " value="Add Trad Recruitment Plan"> | |
| <input type="button" class="btn btn-primary btn-sm RegStudent " value="Request Registration"> | |
| <input type="button" class="btn btn-default btn-sm Other " value="Something Else..."> | |
| </div> | |
| <div class="col-md-1"> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var $progControl = $(".progControlSelect2").select2({ | |
| placeholder: "Type to add an activity to user..." | |
| }); | |
| $(".AGSPlan").on("click", function() { | |
| $progControl.val(["aa", "ac", "ae"]).trigger("change"); | |
| }); | |
| $(".TradPlan").on("click", function() { | |
| $progControl.val(["aa", "ab", "af"]).trigger("change"); | |
| }); | |
| $(".RegStudent").on("click", function() { | |
| $progControl.val(["ag", "ah", "ai", "aj"]).trigger("change"); | |
| }); | |
| $(".Other").on("click", function() { | |
| $progControl.val(["ak"]).trigger("change"); | |
| }); | |
| $(".clearSelect2").on("click", function() { | |
| $progControl.val(null).trigger("change"); | |
| }); | |
| $(".Submit").on("click", function(event) { | |
| alertify.alert( | |
| '<strong class="purple">Silly guy</strong>, This is a fake button.' | |
| ); | |
| }); | |
| alertify.defaults = { | |
| glossary: { | |
| title: "Nothing to see here...", | |
| ok: "I AM a silly guy" | |
| }, | |
| theme: { | |
| input: "ajs-input", | |
| ok: "ajs-ok", | |
| cancel: "ajs-cancel" | |
| } | |
| }; | |
| //Disable select open on option remove | |
| $("select").on("select2:unselect", function (evt) { | |
| if (!evt.params.originalEvent) { | |
| return; | |
| } | |
| evt.params.originalEvent.stopPropagation(); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container { | |
| font-size: 12px; | |
| } | |
| .title { | |
| font-size: 16px; | |
| background: black; | |
| width: 100%; | |
| margin: 0; | |
| padding: 8px; | |
| color: white; | |
| text-align: center; | |
| } | |
| .content { | |
| padding-top: 20px; | |
| } | |
| .full { | |
| text-align: center; | |
| } | |
| .bg { | |
| padding: 15px; | |
| background: #bfe6e4; | |
| } | |
| input[type="button"] { | |
| display: block; | |
| width: 200px; | |
| margin-bottom: 4px; | |
| cursor: pointer; | |
| } | |
| .btn-success { | |
| color: #fff; | |
| background-color: #246b24; | |
| border-color: #1e5f1e; | |
| } | |
| .btn.btn-default.btn-sm.Other { | |
| border: 1px solid #292b2c; | |
| border: 1px solid rgba(0, 0, 0, 0.17); | |
| background: #464646; | |
| color: white; | |
| } | |
| .btn.btn-default.btn-sm.Other:hover { | |
| background: #333333; | |
| } | |
| input.clearSelect2, input.Submit { | |
| margin-top: 15px; | |
| width: 99px; | |
| display: inline-block; | |
| } | |
| .clearSelect2 { | |
| background: red; | |
| } | |
| .progControlSelect2 { | |
| width: 350px; | |
| } | |
| .select2-container--default .select2-selection--multiple .select2-selection__choice { | |
| border-radius: 0; | |
| } | |
| .purple { | |
| color: #980798; | |
| } | |
| .select2-selection__choice__remove { | |
| color: #5a5a5a !important; | |
| position: relative; | |
| top: -1px; | |
| font-size: 13px; | |
| } | |
| .ajs-button { | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See this PEN Live: https://codepen.io/johnbocook/pen/vZoZpK