jquery – 将所选文本选项以外的文本添加到选择插件的选择中

前端之家收集整理的这篇文章主要介绍了jquery – 将所选文本选项以外的文本添加到选择插件的选择中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 the chosen plugin.

将其添加到我的文档不能使我键入文本字段并添加一个新项目到列表.

$(document).ready(function (){    
    $(".chosen-select").trigger("chosen:updated");
});

这将允许将一些硬编码的文本添加到列表中:

$(document).ready(function (){
    $('.chosen-select').chosen();
    $('.addsomething').click(function (){
        $(".chosen-select").prepend("<option>Utopia</option>");
        $(".chosen-select").trigger("chosen:updated");
    });
});

我想看到的是,我希望能够在文本字段中添加文本,点击返回,如果我没有选择它,则添加我的条目.它不需要永久添加到选项列表.

解决方法

不知道是否可以以更简单的方式完成,但是这样做很好.代码的意见解释了每一步:
var select,chosen;

// Cache the select element as we'll be using it a few times
select = $(".chosen-select");

// Init the chosen plugin
select.chosen({ no_results_text: 'Press Enter to add new entry:' });

// Get the chosen object
chosen = select.data('chosen');

// Bind the keyup event to the search Box input
chosen.dropdown.find('input').on('keyup',function(e)
{
    // If we hit Enter and the results list is empty (no matches) add the option
    if (e.which == 13 && chosen.dropdown.find('li.no-results').length > 0)
    {
        var option = $("<option>").val(this.value).text(this.value);

        // Add the new option
        select.prepend(option);
        // Automatically select it
        select.find(option).prop('selected',true);
        // Trigger the update
        select.trigger("chosen:updated");
    }
});

这是一个工作示例:http://jsfiddle.net/jHvmg/436/

猜你在找的jQuery相关文章