How to change the mobile safari's default text "0 items" when using the "multiple" attribute of the "select" tag?

Question

I am using the "multiple" attribute in the html tag "select".

<select multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>                         
</select>

In the mobile safari, by default it shows "0 items" in the box. When I am selecting more than 1 items, say 3 then it shows "3 items" in the box.

Is it possible to change the default text from "0 items" to something else like "Select option(s)"?

Answer 1

Yes. Here's what you need: For your first option, simply add

<option disabled selected class="hidden">Select option(s)</option>

where class hidden is simply:

.hidden { display:none; }

Then on focus, remove the "selected" attribute / property of the first option using jquery:

$('select').on('focus', function() {
    $(this).children(':first-child').removeProp('selected');
});