Answers for "multiple select2 html"

html select multiple

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<form action="http://httpbin.org/post" method="post">
  <select data-placeholder="Begin typing a name to filter..." multiple class="chosen-select" name="test">
    <option value=""></option>
    <option>American Black Bear</option>
    <option>Asiatic Black Bear</option>
    <option>Brown Bear</option>
    <option>Giant Panda</option>
    <option>Sloth Bear</option>
    <option>Sun Bear</option>
    <option>Polar Bear</option>
    <option>Spectacled Bear</option>
  </select>
  <input type="submit">
</form>

select2 multi select

######## 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 2 dropdown

$('#element').select2({
    placeholder: 'Select a option',
    minimumInputLength: 3,
    ajax: {
        url: route('api.fetch-options'),
        dataType: 'json',
        type: 'GET',
        quietMillis: 50,
        data: function (params) {
            return {
                visitor_name: params.term
            }
        },
        processResults({ data }) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name,
                        id: item.id,
                    }
                })
            }
        }
    }
}).change(() => {
	// perform some action on change
});

html select multiple

$(".chosen-select").chosen({
  no_results_text: "Oops, nothing found!"
})