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

我想添加用户在所选择的多个输入的文本字段中输入的文本作为选项，并自动选择它，当选项没有时，所有这些存在，如果选项存在，那么我想选择它。到目前为止，我已经能做到这一点：动态添加选项以选择选择多个JQuery插件

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函数中的焦点。

我有两个问题：

重中之重，当用户按下输入，并键入一个选项的子字符串，则该选项未被选中，但子文本将被添加和选择。不是我想要的。

例如：如果我可以选择“富”，并开始键入“FO”，选择将迎来第一选项为候补（“富”），所以如果我按下回车键，应选择，但是相反，当我真的想选择“foo”时，会发生什么是“fo”作为选项被添加并被选中。

如果我点击选择“foo”，那么一切正常。选择选项标记被选中，子字符串文本作为选项的一部分。

如何添加一个不存在的选项来选择，而不会丢失所有原始功能？

我怎样才能访问我选择的多个字段我选择了在选定的插件内选中？正如您在上面的代码中看到的，选择多个字段的ID是硬编码的。我想这样做是为了能够在用户添加新选项时刷新选择。
，我正在寻找的功能非常相似，linkedin

感谢的技能部件提前！

来源

2012-07-31 danielrvt

你似乎在说，当用户进入一个与现有选项的开头匹配的值，那么应该选择该选项，但是如果它匹配多个选项会怎样选项？（例如，“fo”会匹配“food”和“football” - 选择两个？） – nnnnnn 2012-07-31 01:36:45

我只想让用户选择他想要的内容，并且在他希望的情况下添加一个新选项。 – danielrvt 2012-07-31 02:00:06

@nnnnnn说+1，但是如果你想添加“fo”又怎么样？我认为这个问题比其他任何东西都更具概念性。看起来你需要机制来（a）准确地添加你输入的内容，而不管现有的选项，（b）添加一个singleton匹配选项，以及（c）添加从多个匹配中选择的选项。 – 2012-07-31 02:05:24

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

继承人的链接：http://ivaynberg.github.com/select2/

看看在自动符号化的例子，我认为这可能是你在找什么。

来源

2013-03-28 19:55:01

叫它keyup_check keydown_check被称为按下字母被初始化不像keyup_check

来源

2013-11-17 00:00:12 njoshsn

我需要这个，所以今天我写了这样的事情之前：

$(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”是plugin，它以异步方式发送表单数据并以JSON格式返回服务器响应。在控制器中，我检查标签是否存在，否则我创建它。作为回应，我使用了五个“jsoned”标签对象。

来源

2014-11-05 16:07:47

我创建了一个jquery的jsfiddle选择文本和创建作为选项。在早期版本的jquery中选择了设施创建选项。

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/

来源

2016-12-20 06:51:59

我找到了解决方法多选择

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

来源

2018-01-25 22:54:31

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

回答

相关问题