File "test.html"

Full Path: /home/humancap/cl.humancap.com.my/assessment/cl-admin/test.html
File size: 2.03 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>Multi-Select with Select2</title>
  <!-- Bootstrap CSS -->

<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<!-- Or for RTL support -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.rtl.min.css" />

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

</head>
<body>
      <script>
    $(document).ready(function() {
          $('.js-example-basic-multiple').select2();
    });
  </script>

        <select class="js-example-basic-multiple" data-placeholder="Choose your favorite fruits" name="states[]" multiple="multiple">
        <optgroup label="Sour">
          <option value="Orange">Orange</option>
          <option value="Grapes">Grapes</option>
          <option value="Strawberry">Strawberry</option>
        </optgroup>
        <optgroup label="Sweet">  
          <option value="Banana">Banana</option>
          <option value="Apple">Apple</option>
          <option value="Mango">Mango</option>
        </optgroup> 
          <!-- Add more options as needed -->
        </select>

  <div class="container mt-5">
    <div class="row">
      <div class="col-lg-6">
        <h2>Multi-Select with Select2</h2>
        <!-- HTML for the Select2 multi-select -->

      </div>
    </div>
  </div>



  <!-- Initialize Select2 for multi-select and handle selection -->

</body>
</html>