JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker" data-live-search="true">
  <option val="Must"> Mustard </option>
  <option val="Cat"> Ketchup </option>
  <option val="Rel"> Relish </option>
</select>

JavaScript

$(document).ready(function() {

  $('select').on('change', function(e) {
    console.log(this.value,
      this.options[this.selectedIndex].value,
      $(this).find("option:selected").val(), );
  });

});