【问题标题】:Yii Booster Select2 - allow new values [closed]Yii Booster Select2 - 允许新值 [关闭]
【发布时间】:2015-02-24 15:33:00
【问题描述】:

我使用来自 Yii Booster 的 Select2 作为下拉列表。我想允许用户输入他自己的值,但我不知道如何。我认为,没有这个配置。我想我可能会尝试类似这里的东西 - Select2 dropdown but allow new values by user? 但我不知道如何在从 php 表单呈现 select2 时添加这个 javascript。有人可以帮忙吗?谢谢

【问题讨论】:

    标签: javascript php yii jquery-select2


    【解决方案1】:

    我认为您可以在小部件的选项中添加一个 javascript 函数作为选项,方法是在其前面加上“js:”,例如:

    $this->widget(
        'booster.widgets.TbSelect2',
        array(
            'asDropDownList' => false,
            'name' => 'clevertech',
            'options' => array(
                'tags' => array('clever', 'is', 'better', 'clevertech'),
                'placeholder' => 'type clever, or is, or just type!',
                'width' => '40%',
                'tokenSeparators' => array(',', ' ')
                'createSearchChoice' => 'js:function(term, data) {
                 if ( $(data).filter( function() {
                   return this.text.localeCompare(term)===0;
                 }).length===0) {
                   return {id:term, text:term};
                 }',
               }
            )
        )
    );
    

    为了进一步调试,如果你打开 TbSelect2.php 你可以看到它对选项的作用:

    $options = !empty($this->options) ? CJavaScript::encode($this->options) : '';
    

    如果你去 CJavaScript::encode 函数你可以看到它:

    if(is_string($value))
    {
        if(strpos($value,'js:')===0 && $safe===false)
            return substr($value,3);
        else
            return "'".self::quote($value)."'";
    }
    

    注意:我打开的是 Yii 1 而不是 2 的 CJavaScript::encode,但可能是一样的。

    【讨论】:

    • 感谢您的回复。这可能会奏效,但我收到错误“当附加到
    • 顺便说一句,我使用的是 asDropDownList true
    • 我在自定义 select2 选项中遇到了类似的问题,该选项不允许我使用下拉菜单,所以我切换到隐藏输入,如果将 asDropDownList 设置为 false,它不起作用吗?从我在代码中可以看到,它将使用隐藏字段。
    • 是的,当您将 asDropDownList 设置为 false 时它可以工作,但我想将其用作 DropDownList。没关系,我现在在标记模式下使用它,没关系:-) 你是如何切换到隐藏输入的?
    • 我只使用了 select2 插件,没有这个扩展,所以我刚刚生成了一个带有 ID 的隐藏字段并将 select2 应用于该 ID。
    猜你喜欢
    • 2016-04-01
    • 2017-12-06
    • 2013-01-12
    • 1970-01-01
    • 2013-05-22
    • 1970-01-01
    • 1970-01-01
    • 2013-01-23
    相关资源
    最近更新 更多