yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
本文实例讲述了yii2框架中使用下拉菜单的自动搜索yii-widget-select2的方法。分享给大家供大家参考,具体如下:
github中源代码地址:https://github.com/kartik-v/yii2-widget-select2
利用composer.phar安装此插件:
php composer.phar require kartik-v/yii2-widget-select2 "*"
引用方法:
use kartik\select2\Select2;
源代码:
<?= $form->field($model, 'companies_company_id')->widget(Select2::classname(), [ 'data' => ArrayHelper::map(Companies::find()->all(),'company_id','company_name'), 'language' => 'en', 'options' => ['placeholder' => 'Select a state ...'], 'pluginOptions' => [ 'allowClear' => true ], ]); ?>
相关内容的详细解释:http://demos.krajee.com/widget-details/select2
希望本文所述对大家基于Yii框架的PHP程序设计有所帮助。
相关推荐
-
js和jquery分别验证单选框、复选框、下拉框
本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen
-
jquery及原生js获取select下拉框选中的值示例
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas
-
javascript中select下拉框的用法总结
本文针对开发项目中遇到的问题,进行了汇总 问题1:如何选择select的option里面的值? 首先会用到一个方法 onchange():这个方法主要用于触发,选择框内容改变时间 实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="
-
javascript省市区三级联动下拉框菜单实例演示
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"
-
JS组件Bootstrap Select2使用方法详解
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部
-
Extjs中ComboBoxTree实现的下拉框树效果(自写)
最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧-- 在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下: 复制代码 代码如下: Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor: function (cfg) { cfg = cfg || {}; Ext.ux.TreeCombo.superclass.constructor.
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
js实现带搜索功能的下拉框实时搜索实时匹配
1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT
-
Select2.js下拉框使用小结
用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本. 官网:http://select2.github.io/ 演示: 由于博客系统的原因,所以只能演示简单的功能. 一.文件需要引入select2.full.js.select2.min.css(4.0.1版本)和jquery.1.8.3及以上 最新版本
-
JS组件Bootstrap Select2使用方法解析
本文总结了组件Bootstrap Select2在一些实际项目中的用法,分享给大家,有需要的朋友可以借鉴一下,少走些弯路,具体内容如下 效果图: 无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及: {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/select2.min.css') }} {{ stylesheet_link('css/font-
随机推荐
- vue+node+webpack环境搭建教程
- ORACLE多条件统计查询的简单方法
- Linux下刚安装完mysql修改密码的简单方法
- PHP也可以當成Shell Script
- python使用pymysql实现操作mysql
- node.js中的fs.writeSync方法使用说明
- js放到head中失效的原因与解决方法
- python实现html转ubb代码(html2ubb)
- Oracle用户连续登录失败次数限制如何取消
- 单元选择合并变色示例代码
- Python中.py文件打包成exe可执行文件详解
- Laravel 4 初级教程之视图、命名空间、路由
- Android RecylerView入门教程
- Java基于分治法实现的快速排序算法示例
- 详解vue2.0 不同屏幕适配及px与rem转换问题
- Python爬虫之正则表达式基本用法实例分析
- python启动应用程序和终止应用程序的方法
- C#/.NET使用git命令行来操作git仓库的方法示例
- c++读取和写入TXT文件的整理方法
- php 中phar包的使用教程详解