Bootstrap 3 - Dropdown Select
by bizamajig
HTML
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
<div class="form-group">
<label for="platform" class="control-label col-xs-2">Platform:</label>
<div class="col-xs-10">
<div class="dropdown" id="dropdownMenu2">
<button class="btn btn-default"
data-toggle="dropdown">
<span id="dropdown_title2">Select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li><a tabindex="-1" href="#">Android</a></li>
<li><a tabindex="-1" href="#">IOS</a></li>
<li><a tabindex="-1" href="#">Windows Phone</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="printPlatform" class="control-label col-xs-2">
Platform:
</label>
<div class="col-xs-10">
<span id="printPlatform"></span>
</div>
</div>
<div class="clearfix"></div><br/>
<button class="btn btn-primary" id="SendRequest">
Send Request
</button>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/25812022/1366033'>
Bootstrap JQuery: dropdown menu validation on selected item
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>
JavaScript
$("#dropdownMenu2").on("click", "li a", function() {
var platform = $(this).text();
$("#dropdown_title2").html(platform);
$('#printPlatform').html(platform);
});
$("#SendRequest").click(function() {
var platform = $("#dropdown_title2").html();
var isValid = (platform !== 'Select')
if (!isValid) {
alert('Please fill in missing details');
} else {
alert('Thank you for submitting');
}
});