Heim > Backend-Entwicklung > PHP-Tutorial > YII2可有方法实现下拉框联动?

YII2可有方法实现下拉框联动?

WBOY
Freigeben: 2016-06-06 20:41:52
Original
1038 Leute haben es durchsucht

本来想去yiichina问的,但是上面很水,基本只有站长偶尔回复一下!

就是类似于城市三级联动那种,选中一级之后,在后一个下拉框列出下一级的分类,只是我是用于我的分类。其实用html+js+php我是可以弄出来的,只是这样会抛弃yii自带的表单生成方法,也会失去他的验证!
暂时先用自己会的方法弄了,如果有大神知道,再改成YII风格的~

回复内容:

本来想去yiichina问的,但是上面很水,基本只有站长偶尔回复一下!

就是类似于城市三级联动那种,选中一级之后,在后一个下拉框列出下一级的分类,只是我是用于我的分类。其实用html+js+php我是可以弄出来的,只是这样会抛弃yii自带的表单生成方法,也会失去他的验证!
暂时先用自己会的方法弄了,如果有大神知道,再改成YII风格的~

Yii2本身没有联动效果插件,都是用其他类拼接起来的,不过你自己可以写插件。yii2的例子没有,之前写过yii1的联动效果。你不想失去本身的验证,只要input的name跟模型中的一样就行了。

<code>//view
<div class="form-group row">
    <div class="col-md-1">
        <?php echo $form->dropDownList($blog,'mid',CHtml::listData(Metas::model()->parents(),'mid','name'), array (
            'class'=>'form-control', 'empty'=>array('0'=>'请选择类别'), 'onchange'=>'ajaxGetArea(this)')); ?>
        <?php echo $form->error($blog,'mid'); ?>
    </div>
</div>

//js
Yii::app()->clientScript->registerScript('metas',
'
function ajaxGetArea(obj)
{
        //请求地址
        var link = "'.Yii::app()->createUrl("/cms/metas/json").'";
    //请求数据
    $.post(
        link,
        {
            parent : $(obj).val()
        },
        function(data)
        {
            //清除子类的select
            $(obj).parent().nextAll("div").each(function() {
                $(this).remove();
            });

            if (data != "-1") {
                //构造子类select的html
                var select = null;
                // 此处注意添加onchange事件
                select = "<div class='\"col-md-1\"'><select class='\"form-control\"' name='\"Articles[mid]\"' onchange='\"ajaxGetArea(this)\"'><option value='\"-1\"'>请选择类别</option>";
                $.each(data, function(key, item) {
                    select += "<option value="+item.mid+">"+item.name+"</option>";
                });
                select += "</select></div>";
                //插入到右侧,上一级
                $(obj).parent().after(select);
                //触发下一个子类select的动态加载
                //$(obj).next("select").trigger("change", function() {
                    //ajaxGetArea($(this));
                //});
                //更新name的位置
                $(obj).removeAttr("id");
                $(obj).next("select").attr("id", "Articles_mid");
                $(obj).removeAttr("name");
                $(obj).next("select").attr("name", "Articles[mid]");
            }
        },
        "json"
    );
}
',CClientScript::POS_END);
</code>
Nach dem Login kopieren

http://www.cnsecer.com/7140.html 不要谢我

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage