Q: jQuery Select2: How to add placeholder text for multi-value selectboxes I'm working with multi-value selectboxes using the Select2 jQuery plugin. These text boxes have tagging enabled, so the user can enter arbitrary values. I have a placeholder set using the select2 options, but it is only visible when the selectbox is empty. See below.
Empty selectbox, shows placeholder:

Selectbox has values, no placeholder:

What I'd like to have is something like the image below. I'd like to specify a different placeholder value for the search input field that will show only when the selectbox has values in it. When the selectbox is empty, the placeholder will return to the initial placeholder value.


A: On the event change.select2 you can check if there are more than 0 values selected and so you can reset the placeholder to a new value:
$('.js-example-basic-multiple').on('change.select2', function (e) {
    if ($('.js-example-basic-multiple').val().length > 0) {
       $('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
            .attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
    }
});

The snippet:


$('.js-example-basic-multiple').select2({
    placeholder: "First selection....",
    allowClear: false
});

$('.js-example-basic-multiple').on('change.select2', function (e) {
    if ($('.js-example-basic-multiple').val().length > 0) {
        $('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
                .attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>



<select class="js-example-basic-multiple js-states form-control select2-hidden-accessible" multiple=""
        data-select2-id="select2-data-61-g4nr" tabindex="-1" aria-hidden="true" style="width: 100%;">
    <optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="select2-data-66-rote">
        <option value="AK" data-select2-id="select2-data-67-tgfy">Alaska</option>
        <option value="HI" data-select2-id="select2-data-68-1ncw">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone" data-select2-id="select2-data-69-ey9b">
        <option value="CA" data-select2-id="select2-data-70-cjom">California</option>
        <option value="NV" data-select2-id="select2-data-71-qoj8">Nevada</option>
        <option value="OR" data-select2-id="select2-data-72-q7yi">Oregon</option>
        <option value="WA" data-select2-id="select2-data-73-ph4j">Washington</option>
    </optgroup>
    <optgroup label="Mountain Time Zone" data-select2-id="select2-data-74-wzgi">
        <option value="AZ" data-select2-id="select2-data-75-86ql">Arizona</option>
        <option value="CO" data-select2-id="select2-data-76-3mqr">Colorado</option>
        <option value="ID" data-select2-id="select2-data-77-ry7y">Idaho</option>
        <option value="MT" data-select2-id="select2-data-78-z7m6">Montana</option>
        <option value="NE" data-select2-id="select2-data-79-2lte">Nebraska</option>
        <option value="NM" data-select2-id="select2-data-80-xd5z">New Mexico</option>
        <option value="ND" data-select2-id="select2-data-81-2wmh">North Dakota</option>
        <option value="UT" data-select2-id="select2-data-82-0lmr">Utah</option>
        <option value="WY" data-select2-id="select2-data-83-yeoz">Wyoming</option>
    </optgroup>
    <optgroup label="Central Time Zone" data-select2-id="select2-data-84-mr5y">
        <option value="AL" data-select2-id="select2-data-85-l6br">Alabama</option>
        <option value="AR" data-select2-id="select2-data-86-jpai">Arkansas</option>
        <option value="IL" data-select2-id="select2-data-87-x0o2">Illinois</option>
        <option value="IA" data-select2-id="select2-data-88-k0y3">Iowa</option>
        <option value="KS" data-select2-id="select2-data-89-oki5">Kansas</option>
        <option value="KY" data-select2-id="select2-data-90-ot5d">Kentucky</option>
        <option value="LA" data-select2-id="select2-data-91-j93e">Louisiana</option>
        <option value="MN" data-select2-id="select2-data-92-ljou">Minnesota</option>
        <option value="MS" data-select2-id="select2-data-93-4cwz">Mississippi</option>
        <option value="MO" data-select2-id="select2-data-94-4452">Missouri</option>
        <option value="OK" data-select2-id="select2-data-95-hee9">Oklahoma</option>
        <option value="SD" data-select2-id="select2-data-96-h9gh">South Dakota</option>
        <option value="TX" data-select2-id="select2-data-97-q4kh">Texas</option>
        <option value="TN" data-select2-id="select2-data-98-wps1">Tennessee</option>
        <option value="WI" data-select2-id="select2-data-99-mdzk">Wisconsin</option>
    </optgroup>
    <optgroup label="Eastern Time Zone" data-select2-id="select2-data-100-iqi4">
        <option value="CT" data-select2-id="select2-data-101-rkjk">Connecticut</option>
        <option value="DE" data-select2-id="select2-data-102-ih1a">Delaware</option>
        <option value="FL" data-select2-id="select2-data-103-4zkz">Florida</option>
        <option value="GA" data-select2-id="select2-data-104-sdgj">Georgia</option>
        <option value="IN" data-select2-id="select2-data-105-ulm1">Indiana</option>
        <option value="ME" data-select2-id="select2-data-106-onok">Maine</option>
        <option value="MD" data-select2-id="select2-data-107-qwwa">Maryland</option>
        <option value="MA" data-select2-id="select2-data-108-j2v5">Massachusetts</option>
        <option value="MI" data-select2-id="select2-data-109-uhro">Michigan</option>
        <option value="NH" data-select2-id="select2-data-110-ui5e">New Hampshire</option>
        <option value="NJ" data-select2-id="select2-data-111-yd0u">New Jersey</option>
        <option value="NY" data-select2-id="select2-data-112-h33j">New York</option>
        <option value="NC" data-select2-id="select2-data-113-7t3i">North Carolina</option>
        <option value="OH" data-select2-id="select2-data-114-bc13">Ohio</option>
        <option value="PA" data-select2-id="select2-data-115-lbm3">Pennsylvania</option>
        <option value="RI" data-select2-id="select2-data-116-zgza">Rhode Island</option>
        <option value="SC" data-select2-id="select2-data-117-kyou">South Carolina</option>
        <option value="VT" data-select2-id="select2-data-118-npxe">Vermont</option>
        <option value="VA" data-select2-id="select2-data-119-2ony">Virginia</option>
        <option value="WV" data-select2-id="select2-data-120-xyi2">West Virginia</option>
    </optgroup>
</select>


