Kartik Select 2-以编程方式更改多个 [英] Kartik Select 2 - Programatically changing multiple

问题描述

我有一个yii2 activeform，其中表单的功能可以根据表单中的其他内容进行更改.因此，我有一个clubs字段，在某些情况下可以是多个，而在其他情况下则不能是多个.

I have a yii2 activeform where the functionality of the form can change based on other things within the form. So, I have a clubs field, that can be multiple in some instances but not multiple in others.

<?= $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.这应该是在用户进入表单时，也应该在表单上的下拉菜单更改时立即发生.我可以在用户最初进入表单时执行此操作，但是当另一个下拉菜单更改时不能立即执行.

I need to programmatically change the multiple pluginOption to true and false. This should be when the user goes into the form but also immediately when a dropdown is changed on the form. I can do it when the user initially goes into the form but not immediately when another dropdown is changed.

我已经创建了单独的字段，其中一个实际上链接到数据库中的一个字段，而另一个则不是，这种工作方式，但远非优雅！

I've made separate fields, one actually linked to a field in the database and another not, this kind of works but it's far from elegant!

我同时查看了kartik select2文档和标准的jquery select2文档，但我什么也找不到.任何帮助或指示，将不胜感激.

I've looked in both the kartik select2 documentation and the standard jquery select2 documentation and I can't spot anything. Any help or pointers would be much appreciated.

推荐答案

参考

几个月前，我正在开发 Yii2-formwizard 插件，在使用诸如 Select2 和 Datepicker 之类的第三方插件时，提供表格功能和克隆字段的情况确实成为了难题，而我发现了以下代码还有很多其他内容(因为另一部分与您的问题无关，所以不要添加它).

Reference

I was working on a Yii2-formwizard plugin a few months back where I had a situation of providing tabular functionality and cloning the fields really became the pain in the ass when it came to using 3rd party plugins like Select2 and Datepicker and I figured out the following code along with a lot of other (as the other part isn't relevant to your problem so not adding it).

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

The way Kartik-select2 works it stores the select2 plugin-specific options in the data-krajee-select2 attribute of the element you are using the select2 on. And the theme or say the Kartik's plugin-specific options like theme and others are saved in the variable whose name is saved in the data-s2-options attribute. You can look for both of them in view-source of the page where you are using it.

所以您需要做的是

• 获取已应用的选项
• 添加/更新选项
• 重新应用选项

由于您仅添加了一个字段，而不添加另一个字段，所以选择的字段将发生变化，因此，我将演示一个示例，您可以将select2的行为从 multiple 更改为 single使用2个不同的按钮，单击相关按钮，select2将相应地起作用.您可以随时随地调整javascript代码.

As you just added a single field and not the other one on who's selection it would change, I would demonstrate an example where you can change the behavior of the select2 from multiple to single using 2 different buttons, clicking on the relevant button the select2 will work accordingly. You can adjust the javascript code where ever you want to.

但是但是，在添加任何您需要解决的问题的代码之前，使用 ajax 时不需要主要的 data 选项. plugin options 中的code>选项.换句话说，它对您的select2没有任何影响，并且仅在您应该删除它的情况下会增加页面加载时间.

But before I add any code you need to fix one thing, you don't need the main data option when you are using the ajax option inside the plugin options. In other words, it does not have any effect on your select2 and is adding page load time only you should remove it.

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

You select2 should look like below, I added id to the options of the select2 for the example you can change it to the active form formatted name like model-field_name format if you like, but don't forget to change the id in the javascript code too

<?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']);

现在，神奇的是，将其添加到视图顶部

And now the magic thing, add it on the top of your view

$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 按钮.

Now if your select2 is working correctly click on the multiple button and you will see the multiple selections are enabled for the select2 and when clicked on the single button.

希望有帮助.

这篇关于Kartik Select 2-以编程方式更改多个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！