动态添加选项以选择多个JQuery插件

Dynamically add option to chosen select multiple JQuery plugin

本文关键字：JQuery 插件 选择 添加 选项 动态      更新时间：2024-05-29

我想添加用户在所选文本字段中输入的文本。选择多个输入作为选项，并自动选择它，所有这些都是在选项不存在时进行的，如果选项存在，那么我想选择它。到目前为止，我已经做到了：

Chosen.prototype.add_text_as_option = function () {
    $('#id_select').append(
        $('<option>')
                .html(this.search_field.val())
                .attr('selected', 'selected')
                .attr('value', 0)
    );
    $('#id_select').trigger("liszt:updated");
    return false;
};

每当用户按下回车键，而keydown_check函数中的输入字段处于焦点位置时，我就会调用此函数。

我有两个问题：

  • 最重要的是，当用户按下回车键并键入某个选项的子字符串时，该选项不会被选中，但会添加并选择子字符串文本。不是我想要的

例如：如果我可以选择"；foo"；，并开始键入"；fo"；，选中将标记第一个option作为候选者（"foo"），所以如果我按enter键，它应该被选中，但实际情况是；fo"；被添加为选项并在我实际想要选择"；foo"；。

如果我选择"；foo"；只要点击一下，一切都会好起来。选择的选项标记被选中，子字符串文本被视为选项的一部分。

如何在不失去所有原始功能的情况下，将不存在的选项添加到所选选项？

  • 我如何访问我在所选插件中初始化的select multiple字段？正如您在上面的代码中看到的，select multiple字段的id是硬编码的。我希望这样做能够在用户添加新选项时刷新选择。

  • 我正在寻找的功能与linkedin 的技能小部件非常相似

您应该试用基于所选插件的select2插件，但它可以很好地动态添加元素。

链接如下：http://ivaynberg.github.com/select2/

看看自动标记化的例子，我想这可能就是你想要的。

我今天需要这个，所以我写了这样的东西：

$(function() {
    // form id
    $('#newtag').alajax({
        // data contains json_encoded array, sent from server
        success: function(data) {
            // this is missing in alajax plugin
            data = jQuery.parseJSON(data);
            // create new option for original select
            var opt = document.createElement("OPTION");
            opt.value = data.id;
            opt.text = data.name;
            opt.selected = true;
            // check if the same value already exists
            var el = $('#tags option[value="' + opt.value + '"]');
            if( !el.size() ) {
                // no? append it and update chosen-select field
                $('#tags').append( opt ).trigger("chosen:updated");
            } else {
                // it does? check if it's already selected
                if(!el[0].selected) {
                    // adding already existent element in selection
                    el[0].selected = true;
                    $('#tags').trigger("chosen:updated");
                } else {
                    alert("Already selected and added.");
                }
            }

        }
    })
});

"#"newtag是一个表单，".alajax"是一个以异步方式发送表单数据并以JSON格式返回服务器响应的插件。在控制器中，我检查标签是否存在，否则我创建它。作为回应，我创建了五个"jsonde"标签对象。

我创建了一个jsfiddle of jquery selected，它将文本和创建作为选项。在jquery的早期版本中，选择了havefacilitycreate选项。

create_option: true;
persistent_create_option: true;
skip_no_results: true;

你可以使用这个代码：

$('#id_select').chosen({
    width: '100%', 
    create_option: true, 
    persistent_create_option: true, 
    skip_no_results: true
});

jsfiddle链接：https://jsfiddle.net/n4nrqtek/

只需将其称为keyup_check在初始化按下的字母之前调用keydown_check与keyup_check 不同

我找到了一个多选的解决方案

var str_array = ['css','html'];
$("#id_select").val(str_array).trigger("chosen:updated");
相关文章：