yii2带搜索功能的下拉框实例详解

简单的小功能，但是用起来还是蛮爽的。分享出来让更多的人有更快的开发效率，开开心心快乐编程。

如果你还没有使用过composer，你可就out了，看我的教程分享，composer简直就是必备神奇有木有。都说到这个点上了，我们赶紧使用composer进行安装吧。

先给大家展示下效果图：

下面给大家说下具体实现思路：

composer require kartik-v/yii2-widget-select2 "@dev"
#特别说明，因为这里安装的dev版本，也就是开发版本，不稳定版本，如果你的项目是git托管的，composer安装下来之后这里记得删掉 \vendor\kartik-v\yii2-widget-select2目录下的.git文件，不然你提交不上去的哦

等他个大概5分钟的样子差不多了，安装就好了，然后我们就可以像下面一样开始使用了

//如果你的表单是ActiveForm，请使用

use kartik\select2\Select2;
//$data是键值对数组哦，key-value ,下面所声明的所有$data均为键值对数组，以该数组为例
$data = [2 => 'widget', 3 => 'dropDownList', 4 => 'yii2'];
echo $form->field($model, 'title')->widget(Select2::classname(), [
'data' => $data,
'options' => ['placeholder' => '请选择 ...'],
]);

//如果你的表单是非ActiveForm,可以参考下面的

use kartik\select2\Select2;
echo Select2::widget([ 'name' => 'title',
'data' => $data,
'options' => ['placeholder' => '请选择...']
]);

#非ActiveFomr生成的更新数据的时候就需要默认选中，好办，加value值即可

use kartik\select2\Select2;
echo Select2::widget([
'name' => 'title',
'value' => 2,
'data' => $data,
'options' => ['placeholder' => '请选择...']
]);

#但是如果你的表单是ActiveForm生成的，但是往往字段不是表字段怎么办呢？更好办啦，以上面的为例，你只需要指定$model->title = ['title1', 'title2'];即可

以上内容是小编给大家介绍的yii2带搜索功能的下拉框实例详解，希望对大家有所帮助，同时也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • yii2组件之下拉框带搜索功能的示例代码（yii-select2）

    yii2组件之下拉框带搜索功能的示例代码（yii-select2）

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有.都说到这个点上了,我们赶紧使用composer进行安装吧. 不急,先来看看效果图是啥样的,不然都没心情没欲望看下去. 啥玩意,不感兴趣?继续看嘛,看完再操作一边才能觉得好在哪里. 有木有感觉很帅气,当然啦,远远不止,还很上档次用起来效果也是杠杠的有木有. 好了好了,抓紧时间安装,不然聊起来真是没完没

  • yii2带搜索功能的下拉框实例详解

    yii2带搜索功能的下拉框实例详解

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有.都说到这个点上了,我们赶紧使用composer进行安装吧. 先给大家展示下效果图: 下面给大家说下具体实现思路: composer require kartik-v/yii2-widget-select2 "@dev" #特别说明,因为这里安装的dev版本,也就是开发版本,不稳定版本,如果

  • js实现带搜索功能的下拉框实时搜索实时匹配

    js实现带搜索功能的下拉框实时搜索实时匹配

    1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT

  • js实现带搜索功能的下拉框

    js实现带搜索功能的下拉框

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1.介绍 在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的样式太丑.所以接下来利用div+p实现到输入文本的下拉框 2.思路 1 利用一个input充当搜索框,div+p充当下拉框放置于input的下方.如图所示: 2 接下来就是js的实现了,我们先把红色区域的div+p利用display:none隐藏起来. 对表单input添加onfocus

  • Vue使用枚举类型实现HTML下拉框步骤详解

    Vue使用枚举类型实现HTML下拉框步骤详解

    下拉框包含option中的Value和用来显示的选项, 一般后台都是使用的Value值,而不是显示在前台的选项 第一步: 编写下拉框需要的枚举类型 StatusEnum.java public enum StatusEnum { RED, YELLOW, GREEN } 第二步: 编写用来存放下拉框中对应的option中的Value和显示的选项 StatusDTO.java public class StatusDTO { private String code; private String

  • Android 带清除功能的输入框控件实例详解

    Android 带清除功能的输入框控件实例详解

    Android 带清除功能的输入框控件实例详解 今天,看到一个很好的自定义输入框控件,于是记录一下. 效果很好: 一,自定义一个类,名为ClearEditText package com.example.clearedittext; import android.content.Context; import android.graphics.drawable.Drawable; import android.text.Editable; import android.text.TextWatc

  • bootstrap suggest下拉框使用详解

    bootStrap suggest js下拉框的使用,供大家参考,具体内容如下 HTML <div class="modalTop" id="suit_name_div"> <p>选择商品:</p> <%@ include file="dataJs/item/itemSuggest.jsp" %> </div> itemSuggest.jsp <%@ page language=&

  • jQuery实现的纵向下拉菜单实例详解【附demo源码下载】

    jQuery实现的纵向下拉菜单实例详解【附demo源码下载】

    本文实例讲述了jQuery实现的纵向下拉菜单.分享给大家供大家参考,具体如下: 当我们浏览网页和使用word编辑一下文字的时候,我们都能看见横向下拉的身影,有了横向菜单,我们能对整个界面进行更好的布局,达到我们想要的效果,那么这些横向菜单式如何用代码实现的,当我们浏览或使用的时候她又是如何呈现在我们面前的,学习了JQuery之后,小编渐渐看到她美丽的容颜,接下来,小编主要讲解如何通过jquery实现纵向下拉菜单. 第一步,我们来编写html的代码,如下所示: <!DOCTYPE html PUB

  • Android Studio绑定下拉框数据详解

    Android Studio绑定下拉框数据详解

    效果显示: 1.页面xml代码(项目的代码,直接复制会有错,自己修改一下就好) <TextView android:id="@+id/consultation_tv_section" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/consultation_et_doctor&qu

  • angularjs 实现带查找筛选功能的select下拉框实例

    angularjs 实现带查找筛选功能的select下拉框实例

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析:    目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

随机推荐