<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <div class="container" style="margin-top:15px"> <div class="row"> <form> <div class="col-xs-2 form-group"> <label for="email"> <select id="monthSelection" class="selectpicker"> <option data-expense="$10.00">January</option> <option data-expense="$20.00">February</option> <option data-expense="$30.00">March</option> <option data-expense="$40.00">April</option> <option data-expense="$50.00">May</option> <option data-expense="$60.00">June</option> <option data-expense="$70.00">July</option> <option data-expense="$80.00">August</option> <option data-expense="$90.00">September</option> <option data-expense="$100.00">October</option> <option data-expense="$110.00">November</option> <option data-expense="$120.00">December</option> </select> </label> <div class="input-group" style="width:133%"> <input id="totalExpense" type="string" value="$0.00" class="form-control"/> </div> </div> </form> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

// JavaScript using jQuery $(function(){ $('#monthSelection').change(function(){ var selected = $(this).find(':selected'); var expense = selected.data('expense'); $('#totalExpense').val(expense); }); });