I’m using the following code to create a Select2 select list:
<script>
$( document ).ready( function() {
$( '.js-example-placeholder-multiple' ).select2( {
placeholder : 'Choose categories',
closeOnSelect: false,
tags: true,
tokenSeparators: [ ',', ' ' ]
} );
} );
</script>
<select id="genreSelect" name="genreSelect"
class="js-example-placeholder-multiple js-states form-control"
multiple="multiple"
style="height: 30px; display: block; position: absolute;"
title="Select one or more categories, then
click the form to accept your selection(s).">
<optgroup label="Alternative">
<option value="Alternative_Rock">Alternative Rock</option>
<option value="College_Rock">College Rock</option>
<option value="Experimental_Rock">Experimental Rock</option>
<option value="Goth/Gothic_Rock">Goth/Gothic Rock</option>
<option value="Hard_Rock">Hard Rock</option>
</optgroup>
<option value="Other">Other</option>
</select>
Now I want to display “Choose more categories” as a place holder in the Results box when there are any selected items. Note, the “Choose categories” placeholder displays when there are no selected items, and I don’t want the Search placeholder to also be displayed in this case.