JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div ng-app="myApp">

  <div class="container" ng-controller="ctrlTags">
    <div class="row" id="exSelects">
      <div class="col-sm-12">
        <select id="mySel" class="form-control" style="width:200px;">
          <option ng-repeat="item in items" ng-selected="item.selected" ng-model="item.tag">{{item.tag}}</option>
        </select>
        <br/><br/>
        <input type="text" class="form-control" ng-model="test">
        {{test}}
      </div>
      <!--/col-->
    </div>
    <!--/row-->
    
    {{item.selected}}
  </div>
</div>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2-bootstrap.css');

JavaScript

var tagsData = [{
  id: 1,
  tag: 'Apple'
}, {
  id: 2,
  tag: 'Banana'
}, {
  id: 3,
  tag: 'Cherry'
}, {
  id: 4,
  tag: 'Cantelope'
}, {
  id: 5,
  tag: 'Grapefruit'
}, {
  id: 6,
  tag: 'Grapes',
  selected: true
}, {
  id: 7,
  tag: 'Lemon'
}, {
  id: 8,
  tag: 'Lime'
}, {
  id: 9,
  tag: 'Melon',
  selected: true
}, {
  id: 10,
  tag: 'Orange'
}, {
  id: 11,
  tag: 'Strawberry'
}, {
  id: 11,
  tag: 'Watermelon'
}];

function ctrlTags($scope) {

  $scope.items = tagsData;

};

// init angular app and ctrls
angular
  .module('myApp', [])
  .controller('ctrlTags', ['$scope', ctrlTags]);


// init jquery functions and plugins
$(document).ready(function() {

  $.getScript('//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.min.js', function() {
    $.getScript('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js', function() {
      $.getScript('//cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.min.js', function() {
        $.getScript('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js', function() {
          $.getScript('//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js', function() {

            $("#mySel").select2({

            });

            $("#mySel2").select2({
              closeOnSelect: false
            });

            $('#datepicker').datepicker({
              autoclose: true,
            }).on("changeDate", function(e) {
              console.log(e.date);
            });

            $('.input-daterange').datepicker({
              autoclose: true
            }).on("changeDate", function(e) {
              console.log(e.date);
            });

            $('#timepicker').datetimepicker({
              pickDate: false
            });

            $("input").bind('keyup change', function() {
              var $t = $(this);
              var $par = $t.parent();
              var min = $t.attr("data-valid-min");
     ...