本来想去 yiichina 问的，但是上面很水，基本只有站长偶尔回复一下！就是类似于城市三级联动那种，选中一级之后，在后一个下拉框列出下一级的分类，只是我是用于我的分类。其实用html+js+php我是可以弄出来的，只是这样会抛弃 yii 自带的表单生成方法，也会失去他的验证！暂时先用自己会的方法弄了，如果有大神知道，再改成 YII 风格的～

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

2 个回答

得票最新

Jian

76893644

发布于
2014-11-01

✓ 已被采纳

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

//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);