官网: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. 《机器学习实战(基于scikit-learn和TensorFlow)》第六章内容学习心得

    本章讲决策树 决策树,一种多功能且强大的机器学习算法.它实现了分类和回归任务,甚至多输出任务. 决策树的组合就是随机森林. 本章的代码部分不做说明,具体请到我的GitHub上自行获取. 决策树的每个节 ...

  2. Ansible工具原理一

    ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量运行命 ...

  3. 简介 - PMP(Project Management Professional)

    PMP(Project Management Professional) 官网(英文报名):https://www.pmi.org/ 中文注册:http://exam.chinapmp.cn/ Boo ...

  4. Spark面试题

    RDD怎么理解? RDD 是 Spark 的灵魂,也称为弹性分布式数据集.一个 RDD 代表一个可以被分区的只读数据集.RDD 内部可以有许多分区(partitions),每个分区又拥有大量的记录(r ...

  5. Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验

    Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...

  6. 代理模式(静态代理、JDK动态代理原理分析、CGLIB动态代理)

    代理模式 代理模式是设计模式之一,为一个对象提供一个替身或者占位符以控制对这个对象的访问,它给目标对象提供一个代理对象,由代理对象控制对目标对象的访问. 那么为什么要使用代理模式呢? 1.隔离,客户端 ...

  7. 菜鸟系列docker——docker镜像中(4)

    docker镜像命令 该章节主要介绍docker image相关命令实践操作,建议都一起跑一边 1. docker images 列举本机docker镜像 [centos@jiliguo docker ...

  8. MySQL:进阶之视图函数

    一,视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 使用视图我们可以把查询过程中的临时 ...

  9. 痞子衡嵌入式:ARM Cortex-M内核那些事(1)- 内核架构编年史

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM内核架构历史. 众所周知,ARM公司是一家微处理器行业的知名企业,ARM公司本身并不靠自有的设计来制造或出售CPU,而是将处理器架 ...

  10. 【leet-code】135. 加油站

    题目描述 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升. 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost[i] 升.你从其 ...