Kartik Select2 - 以编程方式更改多个

Posted

技术标签:

【中文标题】Kartik Select2 - 以编程方式更改多个【英文标题】:Kartik Select 2 - Programatically changing multiple 【发布时间】:2019-12-01 05:35:26 【问题描述】:

我有一个 yii2 activeform,其中表单的功能可以根据表单中的其他内容而改变。所以,我有一个 clubs 字段,在某些情况下可以是多个,但在其他情况下不是多个。

<?= $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
    'data' => $club_data,
    'hideSearch' => false,
    'options' => ['placeholder' => 'Add Club(s)'],
    'pluginOptions' => [
        'allowClear' => true,
        'multiple' => true,
        'minimumInputLength' => 3,
        'ajax' => [
            'url' => 'web/index.php?r=clubs/clubslist',
            'dataType' => 'json',
            'data' => new JsExpression('function(params)  return q:params.term; '),
        ],
    ],
])->label('Club(s)'); ?>

我需要以编程方式将多个 pluginOption 更改为 true 和 false。这应该是当用户进入表单时,也应该是当表单上的下拉菜单发生更改时。当用户最初进入表单时我可以这样做,但当另一个下拉列表更改时不能立即这样做。

我已经制作了单独的字段,一个实际上链接到数据库中的一个字段,另一个没有,这种工作但它远非优雅!

我查看了 kartik select2 文档和标准 jquery select2 文档,但没有发现任何内容。任何帮助或指示将不胜感激。

【问题讨论】:

您在我的回答下的评论使其完全无效,因此我将其删除。请正确更新您的问题,详细解释问题。 【参考方案1】:

参考

几个月前我正在开发一个Yii2-formwizard 插件,当时我遇到了提供表格功能和克隆字段的情况,当涉及到使用Select2 和@ 等第3 方插件时,我真的很头疼987654324@ 我想出了以下代码以及许多其他代码(因为其他部分与您的问题无关,因此不要添加它)。

解决问题的方法

Kartik-select2 的工作方式是将 select2 插件特定的选项存储在您正在使用 select2 的元素的 data-krajee-select2 属性中。 并且主题或说 Kartik 的插件特定选项(例如 theme 和其他选项)保存在变量中,其名称保存在 data-s2-options 属性中。您可以在使用它的页面的视图源中查找它们。

解决方案

所以你需要做的是

步骤

获取应用的选项 添加/更新选项 应用回选项

由于您只是添加了一个字段,而不是另一个字段将更改谁的选择,我将演示一个示例,您可以使用 2 个不同的按钮将 select2 的行为从 multiple 更改为 single,单击在相关按钮上,select2 将相应地工作。您可以随意调整 javascript 代码。

但是在我添加任何需要修复一件事的代码之前,当您在plugin options 中使用ajax 选项时,您不需要主要的data 选项。换句话说,它对您的 select2 没有任何影响,并且只会增加页面加载时间,您应该将其删除。

您的 select2 应该如下所示,我在 select2 的 options 中添加了 id,例如,如果您愿意,可以将其更改为活动表单格式的名称,如 model-field_name 格式,但不要忘记也可以更改 javascript 代码中的 id

<?php echo $form->field($model, 'clubs')->widget(\kartik\widgets\Select2::classname(), [
    'hideSearch' => false,
    'options' => ['placeholder' => 'Add Club(s)','id'=>'clubs'],
    'pluginOptions' => [
        'allowClear' => true,
        'multiple' => true,
        'minimumInputLength' => 3,
        'ajax' => [
            'url' => 'web/index.php?r=clubs/clubslist',
            'dataType' => 'json',
            'data' => new JsExpression('function(params)  return q:params.term; ')
        ]
    ]
])->label('Club(s)');?>

在您的页面上添加以下按钮

echo html::button('multiple', ['class' => 'btn btn-info', 'id' => 'multi']);
echo Html::button('single', ['class' => 'btn btn-info', 'id' => 'single']);

现在神奇的东西,将它添加到您的视图顶部

$js = <<<JS
    var element=$("#clubs");
    $('#multi').on('click',function(e)
        //reset select2 values if previously selected 
        element.val(null).trigger('change');

        //get plugin options
        let dataSelect = eval(element.data('krajee-select2'));

        //get kartik-select2 options
        let krajeeOptions = element.data('s2-options');

        //add your options
        dataSelect.multiple=true;

        //apply select2 options and load select2 again
        $.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
    );

    $('#single').on('click',function(e)
        element.val(null).trigger('change');
        let dataSelect = eval(element.data('krajee-select2'));
        let krajeeOptions = element.data('s2-options');
        dataSelect.multiple=false;
        $.when(element.select2(dataSelect)).done(initS2Loading("clubs", krajeeOptions));
    );
JS;

$this->registerJs($js, \yii\web\View::POS_READY);

现在,如果您的 select2 工作正常,请单击 multiple 按钮,您将看到 select2 启用了多项选择,并且在单击 single 按钮时。

希望对你有帮助。

【讨论】:

嗨 Muhammad - 感谢您的回复,很抱歉花了这么长时间才回复这个问题,我走神了!太棒了,正是我想要的。我应该提到的一件事是我需要数据字段。该表单用于创建和更新。更新时,如果主要数据不存在,我只会看到俱乐部的 ID,而不是名称。 @Mike 你应该使用initValueText 选项,并像post 一样为多选提供保存的值 嗨 Muhammad - 我想保留 $data 但只选择它试图显示的记录中的那些。我猜你的解决方案效果更好;-) 非常感谢。 @MuhammadOmerAslam 我很抱歉跑题了,但是如何通过这样的 js 修改数据选项?我有同样的情况,但我需要的是更改数据选项而不是多选/单选选项.. 非常感谢.. @Hallaz 我不太明白你的问题是什么意思 修改数据选项 你是在谈论更改通过 select2 中的data 选项提供的下拉选项

以上是关于Kartik Select2 - 以编程方式更改多个的主要内容,如果未能解决你的问题,请参考以下文章

Yii2:Gridview过滤器中的kartik\Select2下拉列表

如何以编程方式更改 select2 值

Yii2. Kartik Select2 小部件宽度

Bootstrap x 可编辑。以编程方式更改数据类型(删除 select2 数据类型)

select2 kartik 数值改为索引值

select2:以编程方式控制占位符