javascript 动态添加选项以选择多个 JQuery 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11731932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically add option to chosen select multiple JQuery plugin
提问by danielrvt
I want to add the text that a user inputs in the text field of a chosen select multiple input as an option, and automatically select it, all of this when the option doesn't exists, if the option exists, then I would like to select it. So far I have manage to do this:
我想添加用户在选定的选择多个输入的文本字段中输入的文本作为选项，并自动选择它，所有这些在选项不存在时，如果选项存在，那么我想选择它。到目前为止，我已经设法做到这一点：
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;
};
I call this function whenever the users presses enter while the input field is in focus within the keydown_checkfunction.
当输入字段在keydown_check函数内处于焦点时，每当用户按下 Enter 键时，我都会调用此函数。
I have two problems:
我有两个问题：
- Top priority, when the user presses enter and has typed a substring of an option, the option won't get selected, but the substring text will be added and selected. Not what I want.
- 最重要的是，当用户按下 Enter 键并输入选项的子字符串时，该选项不会被选中，但会添加并选中子字符串文本。不是我想要的。
For instance: If I have the option "foo", and start typing "fo", chosen will mark the first option as candidate ("foo"), so if I press enter, it should be selected, but instead, what happens is that "fo" is added as an option and selected, when I actually wanted to select "foo".
例如：如果我有选项“foo”，并开始输入“fo”，则选择会将第一个选项标记为候选（“foo”），所以如果我按回车键，它应该被选中，但是，会发生什么当我实际上想选择“foo”时，“fo”被添加为一个选项并被选中。
If I select "foo" with a click, then everything works fine. The option chosen marks is selected and the substring text is taken as part of the option.
如果我单击选择“foo”，则一切正常。选项 selected 标记被选中，子字符串文本作为选项的一部分。
How can I add a non existent option to chosen, without loosing all the original functionality?
如何在不丢失所有原始功能的情况下添加不存在的选项？
How can I access the select multiple field I initilized whith chosen inside the chosen plugin? As you can see in the code above, the id of the select multiple field is hardcoded. I want to do this to be able to refresh the select when the user adds a new option.
The functionality that I'm looking for is very similar to the skills widget of linkedin
如何访问我在所选插件中选择的多选字段？正如您在上面的代码中看到的，select multiple 字段的 id 是硬编码的。我想这样做是为了能够在用户添加新选项时刷新选择。
我正在寻找的功能与linkedin的技能小部件非常相似
Thanks in advance!
提前致谢！
回答by Jake Zeitz
You should try out the select2 plugin which is based off of chosen plugin but it works well with adding elements dynamically.
您应该尝试基于所选插件的 select2 插件，但它适用于动态添加元素。
Heres the link: http://ivaynberg.github.com/select2/
继承人链接：http: //ivaynberg.github.com/select2/
Look at the example for auto-tokenization I think that might be what you are looking for.
看看自动标记化的例子，我认为这可能是你正在寻找的。
回答by Ben K.
I needed this today so I wrote something like this:
我今天需要这个，所以我写了这样的东西：
$(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 is a form, ".alajax" is a pluginthat sends form data in async way and returns server's response in JSON format. In the controller I check if a tag exists otherwise I create it. In response I five "jsoned" tag object.
"#"newtag 是一个表单，".alajax" 是一个插件，以异步方式发送表单数据并以 JSON 格式返回服务器的响应。在控制器中，我检查标签是否存在，否则我会创建它。作为回应，我有五个“jsoned”标签对象。
回答by Dharmendra Singh
I created a jsfiddle of jquery chosen which takes text and create as option. In earlier version of jquery chosen have facility create option.
我创建了一个选择的 jquery jsfiddle，它以文本和创建作为选项。在早期版本的 jquery 中选择了工具创建选项。
create_option: true;
persistent_create_option: true;
skip_no_results: true;
You can use this code:
您可以使用此代码：
$('#id_select').chosen({
width: '100%',
create_option: true,
persistent_create_option: true,
skip_no_results: true
});
jsfiddle link: https://jsfiddle.net/n4nrqtek/
jsfiddle 链接：https://jsfiddle.net/n4nrqtek/
回答by njoshsn
just call it keyup_check keydown_check is called before the pressed letter is initialized unlike keyup_check
只需将其称为 keyup_check keydown_check 在按下的字母初始化之前调用，与 keyup_check 不同
回答by Oleg Borodko
I found a solution multiple select
我找到了一个多选的解决方案
var str_array = ['css','html'];
$("#id_select").val(str_array).trigger("chosen:updated");
