插件: bootstrap-select2 下拉列表的使用学习笔记

原创 2018年04月16日 18:04:52

https://www.cnblogs.com/landeanfen/p/5099332.html

https://github.com/select2/

https://select2.org/


1)引用css和js

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"rel="stylesheet" />

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


2)使用

<selectclass="js-example-basic-single" name="state">

<optionvalue="AL">Alabama</option>

...

<optionvalue="WY">Wyoming</option>

</select>


// In your Javascript (external .js resource or <script> tag)

$(document).ready(function(){

$('.js-example-basic-single').select2();

});


3)设置值:

Selecting options

To programmatically select an option/item for a Select2 control, use the jQuery .val() method:

$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed


1、获取选中的值
var oMenuIcon = $("#txt_menuicon_web").select2({ placeholder: "请选择菜单图标", templateResult: oInit.formatState, templateSelection: oInit.formatState });
oMenuIcon.val();
2、设置select2的选中值
var oMenuIcon = $("#txt_menuicon_web").select2({ placeholder: "请选择菜单图标", templateResult: oInit.formatState, templateSelection: oInit.formatState });
oMenuIcon.val("CA").trigger("change");

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zgpeterliu/article/details/79964105

我的js无限级下拉列表级联插件

我的js无限级下拉列表级联插件插件介绍js独立插件,无限级下拉列表实现,提供数据缓存,不依赖jq。 使用简单,自定义列表渲染方式,自定义数据获取方法。效果展示使用说明 提供了对来自服务器的数据进行缓...
  • cxgasd
  • cxgasd
  • 2017-11-06 22:38:15
  • 198

pickout-纯JS炫酷下拉列表框美化插件

  • 2017年05月16日 11:20
  • 14KB
  • 下载

关于Html下拉输入菜单的几个插件

实现可输入+带自动匹配功能的下拉框,我试过以下几种方法:1.直接使用h5的新标签,对应demo如下:复制代码 ...
  • geforceliu
  • geforceliu
  • 2017-12-03 10:32:52
  • 138

自定义带搜索框的下拉列表插件

最近项目所需,开发了一个附带搜索框的下拉列表插件,在搜索框中输入关键字的同时,捕捉键盘按键释放事件,更新下拉列表显示内容。 jquery插件开发参考: http://blog.csdn.net/xy...
  • xyr05288
  • xyr05288
  • 2017-01-12 16:04:19
  • 1622

下拉列表Select2插件的使用

1、Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:https://select2.github.io/,具体的使用案...
  • linbren
  • linbren
  • 2017-02-06 09:01:58
  • 3161

angular2-使用bootstrap-select插件

背景:站在巨人的肩膀上,在angular2的组件模板里用到了bootstrap-select插件,非常的爽。但是遇到了一个问题。直接进入组件页面时,bootstrap-select的插件显示完全没有问...
  • wgp15732622312
  • wgp15732622312
  • 2017-07-16 21:03:57
  • 1431

自制的操作下拉列表框(SELECT)的三个jquery插件(ajax填充、联动、增加选项)

  • 2007年07月31日 17:18
  • 327KB
  • 下载

jquery下拉列表插件

  • 2014年03月17日 15:44
  • 107KB
  • 下载

Eclipse插件开发学习笔记

  • 2016年05月14日 15:35
  • 79.24MB
  • 下载

js三级地区选择插件,省市县级联下拉列表

js三级地区选择插件,省市县级联下拉列表 3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 d...
  • xiao_qiang2014
  • xiao_qiang2014
  • 2015-05-06 15:21:57
  • 1625
收藏助手
不良信息举报
您举报文章:插件: bootstrap-select2 下拉列表的使用学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)