JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<div class="col-lg-5">
    <div class="input-group">
        <label>Select Field</label>
        <select data-placeholder="Select Field..." id="field_name" style="width:300px;" name="team_name" class="chosen-select" tabindex="1">
            <option value="B">Bar Chart</option>
            <option value="D">Doughnut Chart</option>
            <option value="P">Pie Chart</option>
            <option value="B">Bar Chart</option>
            <option value="D">Doughnut Chart</option>
            <option value="P">Pie Chart</option>
        </select>
    </div>
</div>
<div class="col-lg-5">
    <div class="input-group">
        <label>Select type of Graph</label>
        <select data-placeholder="Select Field..." id="graph_name" style="width:300px;" name="team_name" class="chosen-select" tabindex="2"></select>
    </div>
</div>

CSS

/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.4.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2015 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/

/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.chosen-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}
.chosen-container a {
  cursor: pointer;
}
.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #999999;
}
.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 25px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: #fff;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background:...

JavaScript

$(".chosen-select").chosen({
     width: "95%"
 });

 $('#field_name').change(function () {
     var fieldname = $('#field_name option:selected').val();
     var data = {
         "status": "OK",
             "response": 200,
             "graphs": [
             [{
                 "id": "B",
                     "text": "Bar Chart"
             }, {
                 "id": "D",
                     "text": "Doughnut Chart"
             }, {
                 "id": "P",
                     "text": "Pie Chart"
             }]
         ]
     };
     $.each(data.graphs, function (index, value) {
         $.each(value, function (index, value) {
             console.log(value.id);
             console.log(value.text);

             var option = $("<option value='" + value.id + "'>" + value.text + "</option>");
             $('#graph_name').append(option);

         });
     });
     console.log($('#graph_name'));
     $('#graph_name').trigger("chosen:updated");

 });