<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <a href="tel:1234123412" class="btn btn-primary btn-lg" title="Call Us" id="call-us" rel="external">Call Us</a> <div class="locations-container" style="position:absolute;top:0;opacity:0;"> <select class="form-control" id="location-select"> <option value="">Select Location</option> <option value="tel:1234123412">Nebraska</option> <option value="tel:12341234">California</option> <option value="tel:12341234">Iowa</option> </select> </div> </div> </div>

$(document).ready(function(){ $('#location-select').on('change', function(){ var $this = $(this); if ($this.val() != ""){ window.open('tel:123456', '_system'); //var click_ev = document.createEvent("MouseEvent"); //$('#call-us-fallback').attr('href', $this.val()); //$('#call-us').attr('href', $this.val()); //$('#call-us')[0].click(); // click_ev.initEvent("click", false /* bubble */, true /* cancelable */); //ele.dispatchEvent(click_ev); } }); });