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

我有一个 yii2 activeform，其中表单的功能可以根据表单中的其他内容进行更改。所以，我有一个俱乐部字段，在某些情况下可以是多个，但在其他情况下不能是多个。

<?= $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 文档，但没有发现任何内容。任何帮助或指示将不胜感激。

参考

我当时正在做一个Yii2-formwizard https://github.com/buttflattery/yii2-formwizard几个月前，我遇到了提供表格功能和克隆字段的情况，当涉及到使用第三方插件时，例如Select2 and Datepicker我想出了以下代码以及许多其他代码（因为其他部分与您的问题无关，所以不添加它）。

解决问题的方法

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

Solution

所以你需要做的是

Steps

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

由于您只是添加了一个字段，而不是另一个关于谁的选择会改变的字段，我将演示一个示例，您可以在其中更改 select2 的行为multiple to single使用 2 个不同的按钮，单击相关按钮 select2 将相应地工作。您可以根据需要调整 JavaScript 代码。

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

你 select2 应该如下所示，我添加了id to the options对于示例中的 select2，您可以将其更改为活动表单格式的名称，例如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);

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.

希望能帮助到你。