<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <div class="form-group"> <label for="inpuFname">Multi Level Input</label> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default"> <span id="country_label">NG</span> <span class="caret"></span> <select id="country_options" class="country_options"> <option value="NG">NG - Nigeria</option> <option value="US">US - America</option> </select> </button> </div> <input type="text" value="" class="form-control" name="phone_number" placeholder="Your phone number"> </div> </div> </div> </div>

.input-group-btn {position: relative} .country_options, .chosen-container-single .chosen-default { opacity: 0; position: absolute; display: block; left: 0; top: 0; right: 0; bottom: 0; -webkit-appearance: none; outline: none; cursor: pointer; width: 100%; height: 100%; }

$(document).ready(function(e){ $('#country_options').change(function(e){ e.preventDefault(); var area_code = $(this).val(); $('#country_label').html(area_code); }) });