详细介绍yii2下拉框的实现方法,以商品分类的下拉框为例:

第一种方法:使用Html的activeDropDownList(),该方法的优点是:可以自定义下拉框的样式。具体实现如下:

1.控制器中,获取视图中所需的数据

public function actionList(){
        $category_model=new Category();
        $category_info=$category_model->find()->all();
        return $this->renderPartial('list',['category_info'=>$category_info,'category_model'=>$category_model]);
    }

2.视图中,use yii\helpers\Html;

<?php $form = ActiveForm::begin([]);?>
    <?php echo Html::activeDropDownList($category_model,'category_name',ArrayHelper::map($category_info,'category_id','category_name'),['style'=>'border:1px solid    gray;width:150px;'])?>           
<?php ActiveForm::end(); ?>

3.这样之后,表单的下拉框名称是:Category Name,如果要改变这个值,在控制器对应的模型中使用attributeLabels()方法,具体如下:

public function attributeLabels(){
        return array(
            'category_name'=>'分类',
        );
    }

第二种方法:使用ActiveForm的dropDownList(),优点是使用的yii自定义的样式,也可以自定义样式

1.控制器中获取视图中需要的数据

2.视图中,use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;

<?php $form = ActiveForm::begin([]);?>
    <?php echo $form->field($category_model,'category_name')->dropDownList(ArrayHelper::map($category_info,'category_id','category_name'),['style'=>'border:1px solid blue;width:150px;'])?>           
<?php ActiveForm::end(); ?>

补充:该方法也可以自定义样式:具体如上代码

注意:如果要在下拉框的首项添加‘请选择’、‘全部’等默认的值。用prompt,代码如下:

<?php echo $form->field($brand_model,'brand_name')->dropDownList(ArrayHelper::map($brand_info,'brand_id','brand_name'),['prompt'=>'全部'])?>

各参数说明:

ArrayHelper::map()------------生成k=>v的一维或多维数组

$category_info----------------后台获取的数据

category_id-------------------option的value值

category_name---------------select 的name值

Yii2下拉框实现的更多相关文章

  1. yii2下拉框带搜索功能

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程.作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html ...

  2. yii2 html下拉框

    下拉框 带默认值 <?php $form=ActiveForm::begin(); echo $form->field($model,'uname', ['inputOptions'=&g ...

  3. jquery实现下拉框多选

    一.说明 本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二.代码 <!DOCTYPE html PUBLIC & ...

  4. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

  5. jquery禁用下拉框

    禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disable ...

  6. [原创]自己动手实现React-Native下拉框控件

    因项目需要,自己动手实现了一个下拉框组件,最近得空将控件独立出来开源上传到了Github和npm. Github地址(求Star 求Star 求Star 

  7. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  8. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  9. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集,ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

随机推荐

  1. ajax处理回调函数,用ajax向后台发送数据

    这是我的后台返回给前台的数据: 处理后台返回的数据有一下两种方式: function sethouse_housing_pattern(housing_pattern){ var str=[]; va ...

  2. 关于 Block的使用

    一.类2[类中某个值,需要反向传值到类1中,采用block方式,实现] [1.声明block属性] @property (copy, nonatomic) void(^activityPageView ...

  3. Java学习-009-文件名称及路径获取实例及源代码

    此文源码主要为应用 Java 获取文件名称及文件目录的源码及其测试源码.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:2015-2-3 00:02:27,请知悉. Java获取文件名称的 ...

  4. javascript中创建对象的方式总结

    javascript中创建对象的方式总结 具体代码如下: //创建对象的方式: //创建方式一 var person=new Object(); person.name='jack'; person. ...

  5. 使用Aspose.Cell控件实现Excel高难度报表的生成(一)

    时光飞逝,生活.工作.业余研究总是在不停忙碌着,转眼快到月底,该月的博客文章任务未完,停顿回忆一下,总结一些经验以及好的东西出来,大家一起分享一下.本文章主要介绍报表的生成,基于Aspose.Cell ...

  6. Java Main Differences between Java and C++

    转载自:http://www.cnblogs.com/springfor/p/4036739.html C++ supports pointers whereas Java does not. But ...

  7. C# DevExpress_gridControl 行号行样式

    #region 行号 /// <summary> /// 行号 /// </summary> /// <param name="sender"> ...

  8. js获取页面及个元素高度、宽度

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  9. kfed (kernel file editor:内核文件编辑器)

    kfed是没有在文档中标出的asm工具,在oracle 11gR1中被引入.可以被用来读写asm元数据,特别是磁盘头和asm元数据的内容. kfed是一个单独的工具,不依赖与asm实例,所以可以对mo ...

  10. 并发调用get请求

    http://zeusami.iteye.com/blog/1172864 package com.alibaba.xteam.web.travel.module.rpc; import java.i ...