JSFiddle - React, Tailwind, and code Playground

by aluncob

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<div id="test1"> </div>

<hr/>

<div id="test2"> </div>

JavaScript

let data = {
  "results": [
    {
      "id" : 0,
      "text": "Burkina Faso",
      "children": [
        {
          "id": 1,
          "text": "Boucle du Mouhoun"
        },
        {
          "id": 2,
          "text": "Cascades"
        },
        {
          "id": 3,
          "text": "Centre"
        }
      ]
    },
    {
      "id" : 50,
      "text": "Cameroon",
      "children": [
        {
          "id": 4,
          "text": "Adamaoua"
        },
        {
          "id": 5,
          "text": "Centre"
        },
        {
          "id": 6,
          "text": "Est"
        }
      ]
    }
  ],
  "pagination": {
    "more": true
  }
}

$('#test1').select2({
	data : data,
  width: '100%',
  closeOnSelect: false 
})

$('#test2').select2({
	data : data['results'][0]['children'],
  width: '100%',
  closeOnSelect: false 
})