Bootstrap select

by dchennaraidu

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<select class="selectpicker" id="selectidhere">
  <optgroup label="Condiments">
    <option value='musturd' data-name='1'>Mustard</option>
    <option value='ketcup' data-name='2'>Ketchup</option>
    <option value='reslies' data-name='3'>Relish</option>
  </optgroup>
  <optgroup label="Breads">
    <option value='plain' data-name='4'>Plain</option>
    <option value='steamsed' value='1' data-name='5'>Steamed</option>
    <option value='toasesd' data-name='6'>Toasted</option>
  </optgroup>
</select>

JavaScript

$("#selectidhere").on("change", function () {
  var dataname = $("option[value=" + $(this).val() + "]", this).attr('data-name');
  alert(dataname);
});