multiple select select2

######## In your HTML: <select class="js-example-basic-multiple" name="states[]" multiple="multiple"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select> ####### In your Javascript (external .js resource or <script> tag): $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); ######### Get Selected values $('.js-example-basic-multiple').select2('val') ######## Pre select values on page loads $('.js-example-basic-multiple').val(['AL', 'WY']).trigger('change');

select multiple dropdown by using select2 library JAVAScript

<html>
  <head>
    <title>Using Select2</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 bg-danger">
        <div class="col-md-6">
          <label>Single Select2</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 Select2</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,
          maximumSelectionLength: 2
      });
    </script>
  </body>
</html>

Posted by: Guest on September-01-2021

Answers for "multiple select select2"

Code answers related to "multiple select select2"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us