JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cheapgamessales.com/drop.js"></script>
<select><option>Select</option></select>

CSS

th {border:1px solid #222;}

JavaScript

$(document).ready(function(){

var data = [
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "football"
  },
  {
    "bigcat": "Sport",
    "cat": "mainstream",
    "choice": "basketball"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "MMA"
  },
  {
    "bigcat": "Sport",
    "cat": "niche",
    "choice": "wrestling"
  }
]

        var $select = $('select');var $option="";

        $.each(data, function (index, i) {
         
        $option = $("<option/>").attr("value", i.choice).text(i.bigcat + "@" +( i.cat || "") +"@" +  i.choice);
           
           $select.append($option); 
          });
          
          
        $select.dynamicDropdown({"delimiter":"@"});

});

function associate(keys, values){
    return keys.reduce(function (previous, key, index) {
        previous[key] = values[index];
        return previous
    }, {})
} 

var animals = ['Cow', 'Pig', 'Dog', 'Cat'];
var sounds = ['Moo', 'Oink', 'Woof', 'Miao'];
console.log(associate(animals,sounds));