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 ...
随机推荐
- Android7.0适配APK安装
Android7.0适配APK安装 适配的原因 对于面向Android7.0的应用,Android框架执行的StrictMode API政策禁止在您的应用外部公开file://URL.如果一项包含文件 ...
- 使用异步任务降低API延迟_实践总结
之前在想如何降低API的延迟,这些API里有几个比较耗时的操作且是串行执行,那通过异步执行的方式理论上可以降低运行的时间,如下图所示: 具体的实现比较简单,例如这样: public class Par ...
- hibernate框架(3)---持久化对象
持久化对象 再讲持久化对象之前,我们先来理解有关session中get方法与 load方法区别: 简单总结: (1)如果你使用load方法,hibernate认为该id对应的对象(数据库记录)在数据库 ...
- 五款实用免费的Python机器学习集成开发环境(5 free Python IDE for Machine Learning)(图文详解)
前言 集成开发环境(IDE)是提供给程序员和开发者的一种基本应用,用来编写和测试软件.一般而言,IDE 由一个编辑器,一个编译器(或称之为解释器),和一个调试器组成,通常能够通过 GUI(图形界面)来 ...
- salesforce零基础学习(九十三)Email To Case的简单实现
Salesforce提供了标准的功能来实现通过Email 创建 Case.我们可以设置指定的路由的地址,指定条件的邮件会自动生成到目标salesforce系统的Case数据.Salesforce提供了 ...
- docker - 容器里安装redis
在docker中安装redis 使用命令行安装redis 下载并解压 wget http://download.redis.io/releases/redis-3.2.6.tar.gz tar -xv ...
- go使用websocket遇到dial:x509: certificate signed by unknown authority
websocket.DefaultDialer.Dial(url, headers) 改为 websocket.Dialer{TLSClientConfig: &tls.Config{Root ...
- vux环境配置
第一步 在vue项目中的package.json文件的dependencies中添加下面三行,即安装vux及其相关依赖 "vux":"^2.7.3", &quo ...
- java开发各层对象含义
综述 java的几种对象(PO,VO,DAO,BO,POJO)解释: 一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中 ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...