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 ...
随机推荐
- 搞Java的年薪 40W 是什么水平?
既然楼主提到年薪40w,那我们看看什么公司,什么级别可以给到,再看看要求.阿里是Java大厂,所以可以参考阿里的标准. 阿里一般是16薪水,所以就是税前2.5w,在阿里应该是P6就可以达到,而对P6的 ...
- 为什么使用 Spring Boot?
Spring 是一个非常流行的基于Java语言的开发框架,此框架用来构建web和企业应用程序.与许多其他仅关注一个领域的框架不同,Spring框架提供了广泛的功能,通过其组合项目满足现代业务需求. S ...
- 吴恩达机器学习笔记3-代价函数II(cost function)
本节学习内容:通过使得θ = 0从而简化代价函数来初步了解代价函数的特性及作用原理.
- Winginx nginx 启动提示80端口被占用
第一步:查看80端口占用信息 win键+R运行命令:cmd-->netstat -aon|findstr "80" 2.结束任务 找到 pin=4272这个进程,将进程结束 ...
- LVS DR模式配置
关于LVS的相关介绍,以下两篇文章均做了具体的介绍: http://www.linuxvirtualserver.org/zh/lvs1.html http://www.cnblogs.com/liw ...
- golang实现参数可变的技巧
Go 使用默认参数的技巧 Functional Options Pattern in Go golang中没有函数默认参数的设计,因此需要些特别的技巧来实现. 假如我们需要订购一批电脑,其中电脑配置c ...
- AutoCloseable的用法
今天学习JDBC的时候查看了接口Statement的executeQuery()方法的时候偶然发现了一个新的接口: 看到红笔圈出的那句话当时没反应过来,才知道是接口的多继承,但是后面的那个接口并没有见 ...
- mysql 开发进阶篇系列 17 MySQL Server(key_buffer与table_cache)
一.key_buffer 上一篇了解key_buffer设置,key_buffer_size指定了索引缓冲区的大小,它决定索引处理的速度,尤其是索引读的速度.通过检查状态值Key_read_reque ...
- 一次Linux自动化部署尝试
最近做一个项目临近测试,购买的是阿里云的服务器,每次部署都是手动打包war,然后上传到服务器,然后修改配置文件,不仅繁琐,而且费时,就思索着找一个一键式的部署方式,今天终于腾出时间来做这件事,记录一下 ...
- sshfs基于ssh挂载远程目录
为了像本地一样访问远程主机上的目录,通常我们会在远程主机上使用nfs来导出目录,并在本地主机上mount这个nfs文件系统.如果是windows系统,则使用cifs或samba的方式来访问. 但可能我 ...