<html>
<head>
<title>Using Select</title>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
/>
<!-- Select2 CSS -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-md-6">
<label>Single Select</label>
<select id="single" class="js-states form-control">
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
<div class="col-md-6">
<label>Multiple Select</label>
<select id="multiple" class="js-states form-control" multiple>
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$("#single").select2({
placeholder: "Select a programming language",
allowClear: true,
});
$("#multiple").select2({
placeholder: "Select a programming language",
allowClear: true,
});
</script>
</body>
</html>
Comments
Post a Comment