官网: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 下拉单选和多选的取值赋值的更多相关文章

  1. jquery操作select下拉框的多种方法(选中,取值,赋值等)

    Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  2. 使用 Select2 下拉框实现复选

    使用 Select2 下拉框实现复选 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  3. AngularJS进阶(五)Angular实现下拉菜单多选

    Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...

  4. 品优购商城项目(二)AngularJS、自动代码生成器、select2下拉多选框

    品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框 完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...

  5. select2下拉插件

    下拉单选: 1.行内 1)初始化数据: <select class="form-control select5"> <option selected>张三1 ...

  6. selemiun 下拉菜单、复选框、弹框定位识别

    一.下拉菜单识别 对下拉框的操作,主要是通过Select 类里面的方法来实现的,所以需要new 一个Select 对象(org.openqa.selenium.support.ui.Select)来进 ...

  7. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  8. 关于easyui combobox下拉框实现多选框的实现

    好长时间没有更博了,一是因为最近真的比较忙,二是因为自己是真的偷懒了,哈哈 好啦,这篇博客主要是总结一些关于easyui combobox下拉框实现多选框的实现,包括前台界面的展示,和后台对数据的获取 ...

  9. select2 下拉搜索 可编辑可搜索 / 只可搜索

    官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...

随机推荐

  1. Java的BIO,NIO和AIO的区别于演进

    作者:公众号:我是攻城师 前言 Java里面的IO模型种类较多,主要包括BIO,NIO和AIO,每个IO模型都有不一样的地方,那么这些IO模型是如何演变呢,底层的原理又是怎样的呢? 本文我们就来聊聊. ...

  2. Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择

    范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...

  3. 微信昵称的emoji的尝试性解决方案

    概述 之前分享过前端页面使用emoji,讨论了前端页面使用emoji的方法,但是微信昵称中的emoji怎么获取和显示呢?我查找了一些资料,把心得记录下来,供以后开发时参考,相信对其他人也有用. 转码问 ...

  4. 从前端中的IOC理念理解koa中的app.use()

    忙里偷闲,打开平时关注的前端相关的网站,浏览最近最新的前端动态.佼佼者,平凡的我做不到,但还是要争取不做落后者. 前端中的IoC理念,看到这个标题就被吸引了.IoC 理念,不认识呢,点击去一看,果然没 ...

  5. HDFS第一次课堂测试

    起初在linux上想使用Map/Reduce来完成操作,发现需要导入的jar包过多,大概在6点左右写完程序却跑不起来,一直在找jar包,直接被卡死在这里. 从教室回来之后,发现好多人都是在window ...

  6. virtualbox ubuntu 安装 openssh-server

    最近为了学 DevOps,自己动手在 virtualbox 上安装 ubuntu 系统,安装完后发现好坑,没办法用 XShell 连接.在线安装 openssh-server 又发现没有配置软件源,手 ...

  7. Java核心技术及面试指南 2.3.6 String相关的面试题答案

    2.3.6.1 String是最基本的数据类型吗?能不能被继承? String不能被继承,它是一个对象 2.3.6.2 String s = new String("xyz");创 ...

  8. Intellij idea常用快捷键和技巧

    一.常用快捷键 搜索 double shift 全文搜索内容 ctrl + shift + f 搜索文件 Ctrl + shift + n 打开项目窗口  Alt + 1 智能代码补全 Ctrl+Sh ...

  9. C++版 - 剑指offer 面试题4: 替换空格 题解

    面试题4:替换空格 提交网址: http://www.nowcoder.com/practice/4060ac7e3e404ad1a894ef3e17650423?tpId=13&tqId=1 ...

  10. win32程序之窗口程序,以及消息机制

    win32程序值窗口程序,以及消息机制 一丶简介 通过上一讲.我们了解了窗口其实是绘制出来的.而且是不断绘制的过程. 所以窗口的本质是绘制. 但是我们现在看到的窗口程序.都可以点击关闭按钮. 使用鼠标 ...