Select 2 Nested Groups

by Adam Berry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<!DOCTYPE html>
<html>

  <head>

  </head>
  <meta charset="utf-8">
  <script>
    $(document).ready(function() {
    	//var json = JSON.parse('[{"text":"England","children":[{"text":"Greater Manchester","id":"c1c1"}]}]');
      var json = JSON.parse('[{"id":191,"text":"Oslo"},{"text":"Sweden","children":[{"id":1092,"text":"Stockholm","parents":["Sweden"]}]}]');
      
      $('#NestedOptGroups').select2({
        data: json
      });
    });

  </script>

  </head>

  <body style="margin:50px">
    <strong>Search: <input class="select2" id="NestedOptGroups" placeholder="Select Location" style="width:250px;" /></strong>
  </body>

</html>