angular select2 下拉单选和多选的取值赋值
官网:http://select2.github.io/examples.html
兼容性:

引入文件
/select2.min.js
/select2.min.css
html
<select class="form-control selectName" multiple="multiple">//设置class名为selectName;配置为多选 multiple
<option value="" disabled="disabled">本人</option> //设置一项option为不可选 disabled="disabled"
<option value="">父母</option>
<option value="">配偶</option>
<option value="">子女</option>
<option value="">其他</option>
<option value="">全部</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 下拉单选和多选的取值赋值的更多相关文章
- jquery操作select下拉框的多种方法(选中,取值,赋值等)
Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...
- 使用 Select2 下拉框实现复选
使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...
- 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
- select2下拉插件
下拉单选: 1.行内 1)初始化数据: <select class="form-control select5"> <option selected>张三1 ...
- selemiun 下拉菜单、复选框、弹框定位识别
一.下拉菜单识别 对下拉框的操作,主要是通过Select 类里面的方法来实现的,所以需要new 一个Select 对象(org.openqa.selenium.support.ui.Select)来进 ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- 关于easyui combobox下拉框实现多选框的实现
好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈 好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台对数据的获取 ...
- select2 下拉搜索 可编辑可搜索 / 只可搜索
官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...
随机推荐
- 4.TableLayout、回调接口
会话详情页 listview条目布局 列,当第0列的内容过多时,不至于将其他列的内容,挤出屏幕 --> <TableLayout android:id="@+id/tl_rece ...
- 吴恩达机器学习笔记38-决策下一步做什么(Deciding What to Do Next Revisited)
我们已经讨论了模型选择问题,偏差和方差的问题.那么这些诊断法则怎样帮助我们判断,哪些方法可能有助于改进学习算法的效果,而哪些可能是徒劳的呢? 让我们再次回到最开始的例子,在那里寻找答案,这就是我们之前 ...
- 微信小程序的概要
微信小程序的概要 学习小程序要了解一下什么事小程序,小程序开发前需要做哪些准备,微信小程序开发工具的使用,小程序中的目录结构解析,视图和渲染,事件. 小程序的配置详解,小程序的生命周期与app对象的使 ...
- 使用Java面向对象单词必备
第一章 class 班级,用声明类 object 目标,整个程序集对大 static 静态的 final 不可更改的,用声明常量 private 私有的,用访问权限 public ...
- 《http权威指南》读书笔记6
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
- iReport 5.6.0 安装包下载&安装
iReport 5.6.0 下载 方式有两种: 1.在官网社区上下载,下载地址:https://community.jaspersoft.com/project/ireport-designer/re ...
- centos7通过yum安装nginx
centos7通过yum安装nginx nginx不支持centos7通过yum直接安装~~~ 1.查看操作系统位数[root@-jenkins ~]# rpm -aq|grep centos-rel ...
- mysql 开发进阶篇系列 11 锁问题 (恢复和复制的需要,对锁机制的影响)
1. 恢复和复制的需要,对innodb锁机制的影响 mysql 通过binlog文件对增删除改等更新数据的sql语句,实现数据库的恢复和主从复制.mysql的恢复机制(复制其实就是在slave mys ...
- mysql 开发进阶篇系列 5 SQL 优化(表优化)
一. 使用sql提示 sql 提示(sql hint)是优化数据库的一个重要手段, 是在sql语句中加入一些人为的提示来达到优化操作的目的. 1.1 use index 在查询语句中表名的后面,添加u ...
- Plugin with id 'com.novoda.bintray-release' not found.的解决方案
import Module的时候,有时候会提示Plugin with id 'com.novoda.bintray-release' not found. 点击Open File,定位到该Module ...