|
Answer» For selecting a single option from a set of multiple options, we use select. However, with select as multiple (select multiple), we can select more than one option.
The following is an example displaying “multiple” select in Bootstrap: <!DOCTYPE html>
<html lang="en">
<head>
<TITLE>Bootstrap Multiple Select</title>
<meta charset="utf-8">
<meta name="viewport" CONTENT="width=device-width, initial-scale=1">
<link rel="STYLESHEET" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script SRC="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<form role = "form">
<div class = "form-group">
<h1>Sports</h1>
<LABEL for = "name">Select your favorite sports:</label>
<select multiple class = "form-control">
<option>Cricket</option>
<option>Hockey</option>
<option>Football</option>
<option>Squash</option>
<option>Volleyball</option>
<option>Tennis</option>
<option>Golf</option>
</select>
</div>
</form>
</body>
</html>The below output is visible with select options: Now, press “CTRL” key and select multiple options. On selection the options, it gets highlighted as shown below:
|
