Empty option in select with multiple


#1

Hi all

Im doing some changes in an old project written with Ionic v1

I have this field where the user can select multiple options, so I used a simple .

All works fine, except that in this app we use an empty option has a label to the select field, like:

<select>
<option value=''>Select product</option>
<!-- options -->
</select>

But that doenst works if the select has “multiple”. Then, instead, it will show “0 selected” by default, or “X selected” when options are selected

Is there any way to change this “selected” to something else or at least display just “Select Products” instead?


#2
 <select ng-model="countSelected" 
ng-options="count.id as count.name for count in countList" ng-change="onchange(countList[countSelected-1])">
</select>


$scope.countList = [
    { id: 1, name: 'Please Select' },
    { id: 2, name: 'One' },
    { id: 3, name: 'Two' },
    { id: 4, name: 'Three' }
];

$scope.countSelected = $scope.countList[0].id;    
$scope.onchange = function(id) {
    alert("id:"+id.name);
}

#3

Thank you for you answer, but that’s not working. That’s not what I was asking

My problem is that the select must be a multiple select, I mean:

<select ng-model="countSelected" 
ng-options="count.id as count.name for count in countList" ng-change="onchange(countList[countSelected-1])" multiple>
</select>

When I add the “multiple” attribute, no matter what the field will show “0 selected” (or “2 selected”, if the user selected 2 items etc), instead of whatever I set as a first option. I need it to show a custom label instead, be it an empty option or not (in a normal select, without multiple, we are using that first empty option as a label, or placeholder, to indicate what the field is for)

My question is: in a select multiple, is there any way to set a “placeholder” value or at least change that default “selected” to anything else (this app is in portuguese, I cant show “n selected” in english)?


#4

Just a follow up: I never found a proper solution, so I just had a fixed label “Select Products” to appear above the select and set a color:transparent on it to hide the “0 selected”