Ionic /如何从选择控制中选择多个选项(最大选择将只有3个选项)

Ionic /How to select multiple options from select control(Maximum selection will 3 options only)?

本文关键字：选择 选项 3个 控制 Ionic      更新时间：2023-09-26

我目前使用的是Ionic 1.3.16版本。这里我需要在选择控件中选择多个选项。

这是我的ionic HTML代码:

<div class="list">
    <label class="item item-input item-select">
        <div class="input-label">
            Lightsaber
        </div>
        <select>
            <option>Blue</option>
            <option selected>Green</option>
            <option>Red</option>
        </select>
    </label>
</div>

您在select选项中缺少value属性，因为当您选择选项时，它将反映到ng-model。此外，要选择多个，您需要在选择中添加multiple属性。

标记 

<select ng-model="selectedValues" multiple>
    <option ng-repeat="option in options" value="{{option.value}}">{{option.name}}</option>
</select>
{{selectedValues}}

只需在select字段中添加multiple属性。

<div class="list">
    <label class="item item-input item-select">
   <div class="input-label">
       Lightsaber
   </div>
   <select multiple="multiple">
        <option>Blue</option>
        <option selected>Green</option>
        <option>Red</option>
   </select>
</label>

使用ng-options来绑定数据，方法如下

控制器

$scope.values=  [
   {id:1, name:"value1" }, 
   {id:2, name:"value2" }, 
   {id:3, name:"value3" }
   ];
$scope.selectedValues= []; //initial selections

和视图

<label class="item item-input item-select">
     <select multiple ng-model='selectedValues'
                    ng-options="a.name for a in values" >
     </select>
</label>
{{selectedValues}} <!-- to preview the selection -->
相关文章：