Kartik Select 2-以编程方式更改多个

Question

我有一个yii2activeform，其中表单的功能可以根据表单中的其他内容进行更改。所以，我有一个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)'); ?>

我需要通过编程将multiple-pluginOption更改为true和false。这应该是当用户进入表单时，也应该是当表单上的下拉列表更改时。我可以在用户最初进入表单时这样做，但在另一个下拉列表更改时不会立即这样做。

我已经创建了单独的字段，一个实际上链接到数据库中的字段，另一个没有链接到数据库中的字段，这种工作方式很有效，但它一点也不优雅！

我看了两个kartik select2留档和标准jQuery select2留档，我不能发现任何东西。任何帮助或指针将不胜感激。

Answer 1

几个月前，我在一个Yii2-formwizard插件上工作，在那里我遇到了提供表格功能和克隆字段的情况，当涉及到使用第三方插件，如Select2和Datepicker时，这真的成了屁股上的痛>我想出了以下代码以及许多其他代码（因为其他部分与您的问题无关，所以不添加它）。

按照Kartik-select2的工作方式，它将select2插件特定选项存储在正在使用select2的元素的data-krajee-select2属性中。主题或Kartik的插件特定选项（如theme）和其他选项保存在变量中，该变量的名称保存在data-s2-options属性中。您可以在正在使用它们的页面的“查看源”中查找它们。

所以你需要做的是

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

由于您刚刚添加了一个字段，而不是其他字段，因此它将更改，我将演示一个示例，在该示例中，您可以使用两个不同的按钮将select2的行为从multiple更改为single，单击相关按钮select2将相应工作。您可以随时调整javascript代码。

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

你select2应该看起来像下面一样，我添加了id到select2的选项中，例如，你可以将其更改为活动形式格式化的名称，如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工作正常，请单击“多个”按钮，您将看到select2和单击“单个”按钮时启用了多个选项。

希望能有帮助。