您好,欢迎访问一九零五行业门户网

angular select2 下拉单选和多选的实例详解

兼容性:
引入文件
/select2.min.js/select2.min.css
html
<select class="form-control selectname" multiple="multiple">//设置class名为selectname;配置为多选 multiple         <option value="1" disabled="disabled">本人</option>   //设置一项option为不可选 disabled=disabled         <option value="2">父母</option>         <option value="3">配偶</option>         <option value="4">子女</option>         <option value="5">其他</option>         <option value="6">全部</option> </select>
js
$(.custandinsrelationrange).select2({      placeholder: --请选择--;     //设置select的默认显示文字});
附:
select2 ----- 单选取值赋值
html:
<select class="form-control premperiod" ng-model="selectmodel" ng-options="item.value as item.name for item in selectdatalist"></select>
//ng-model=selectmodel 设置ng-model,它的值等于 item.value
//selectdatalist是接口数据
//select下拉显示的值是item.name
js:
$(.premperiod).select2({ placeholder: --请选择--; //初始化 });
$scope.selectmodel= '' //直接操作ng-model上的值
select2 ----- 多选取值赋值
html:
<select class="form-control premperiod" multiple="multiple" id="premperiod" ng-options="item.value as item.name for item in selectdatalist">         <option value="1">5</option>         <option value="2">10</option>         <option value="3">15</option>         <option value="4">20</option> </select>
js:
$(.premperiod).select2({ placeholder: --请选择--;  });//初始化
$scope.selectmodel= $(#premperiod).val();//取select值 $scope.defaultdata = ['2','3'];//默认值
$(.premperiod).val($scope.defaultdata);//设置select的默认值
以上就是angular select2 下拉单选和多选的实例详解的详细内容。
其它类似信息

推荐信息