允许使用choose.js多重select新值
我使用的是jQuery插件http://harvesthq.github.com/chosen/ ，允许用户从select中select多个选项。 但是，现在我想要让他们创造出现在还不存在的价值观 – 任何想法如何去做？
编辑：类似于SO自己的标签select/创build栏的东西将接近我后
最好不要改变或编辑插件，但会根据需要做。
代码：HTML：
<p>Select something</p> <select name="theSelect[]" multiple="multiple"> <option value="First Option">First Option</option> <option value="Second Option">Second Option</option> </select> 使用Javascript：
$(function(){ $('select').chosen(); });
所以，如果用户input“第三选项”，我想将其添加到列表中，并select它。 值和显示名称是/将是相同的，所以这不是一个问题
根据文档，你可以尝试做这样的事情：
$('select').append('<option>test</option>'); $('select').trigger('liszt:updated');
正如托尼在下面的评论中所述：
“从版本1.0开始，触发器现在”已select：已更新“。请参阅harvesthq.github.io/chosen/#change-update-events ”
我偶然发现了这个想法。 看起来像是一个非常受欢迎的function要求，并且有几个叉子已经实现了它。 看起来它很快就会被合并到主分支中。
+1这个特殊的拉，它的工作魅力： https ： //github.com/harvesthq/chosen/pull/166
您可以在这里查看Koenpunt的叉子： https ： //github.com/koenpunt/chosen
我只是想解决同样的问题。 我修改了一下源代码。 这是新的keyup_checkerfunction。 看看案例13：
AbstractChosen.prototype.keyup_checker = function(evt) { var stroke, _ref; stroke = (_ref = evt.which) != null ? _ref : evt.keyCode; this.search_field_scale(); switch (stroke) { case 8: if (this.is_multiple && this.backstroke_length < 1 && this.choices > 0) { return this.keydown_backstroke(); } else if (!this.pending_backstroke) { this.result_clear_highlight(); return this.results_search(); } break; case 13: evt.preventDefault(); if (this.results_showing) { if (!this.is_multiple || this.result_highlight) { return this.result_select(evt); } $(this.form_field).append('<option>' + $(evt.target).val() + '</option>'); $(this.form_field).trigger('liszt:updated'); this.result_highlight = this.search_results.find('li.active-result').last(); return this.result_select(evt); } break; case 27: if (this.results_showing) this.results_hide(); return true; case 9: case 38: case 40: case 16: case 91: case 17: break; default: return this.results_search(); } };
这是我做的一个简单的方法：
$(".search-field").find("input").live( "keydown", function (evt) { var stroke; stroke = (_ref = evt.which) != null ? _ref : evt.keyCode; if (stroke == 9) { // 9 = tab key $('#tags').append('<option value="' + $(this).val() + '" selected="selected">' + $(this).val() + '</option>'); $('#tags').trigger('chosen:updated'); } });
我知道这不是答案，而是另一种解决办法。
我正在寻找即时添加部分，发现http://ivaynberg.github.com/select2/#tags提供了相同的东西作为select+其他东西，如“标记”。;
您可以将一个事件附加到input文本框来监听特定的字符代码。 之后，添加该选项，并在下拉菜单上触发更新。
var dropDown = $('select.chosen'); dropDown.parent().find('.chzn-container .chzn-search input[type=text]').keydown( function (evt) { var stroke, _ref, target, list; // get keycode stroke = (_ref = evt.which) != null ? _ref : evt.keyCode; target = $(evt.target); // get the list of current options list = target.parents('.chzn-container').find('.chzn-choices li.search-choice > span').map(function () { return $(this).text(); }).get(); if (stroke === 9 || stroke === 13) { var value = $.trim(target.val()); // if the option does not exists if ($.inArray(value,list) < 0) { var option = $('<option>'); option.text(value).val(value).appendTo(dropDown); option.attr('selected','selected'); // add the option and set as selected } // trigger the update event dropDown.trigger("liszt:updated"); return true; } });
leogdion的答案更新，适用于更高版本的select：
var dropDown = $('#select_chosen'); // Make the chosen drop-down dynamic. If a given option is not in the list, the user can still add it dropDown.parent().find('.chosen-container .search-field input[type=text]').keydown( function (evt) { var stroke, _ref, target, list; // get keycode stroke = (_ref = evt.which) != null ? _ref : evt.keyCode; // If enter or tab key if (stroke === 9 || stroke === 13) { target = $(evt.target); // get the list of current options chosenList = target.parents('.chosen-container').find('.chosen-choices li.search-choice > span').map(function () { return $(this).text(); }).get(); // get the list of matches from the existing drop-down matchList = target.parents('.chosen-container').find('.chosen-results li').map(function () { return $(this).text(); }).get(); // highlighted option highlightedList = target.parents('.chosen-container').find('.chosen-results li.highlighted').map(function () { return $(this).text(); }).get(); // Get the value which the user has typed in var newString = $.trim(target.val()); // if the option does not exists, and the text doesn't exactly match an existing option, and there is not an option highlighted in the list if ($.inArray(newString,matchList) < 0 && $.inArray(newString,chosenList) < 0 && highlightedList.length == 0) { // Create a new option and add it to the list (but don't make it selected) var newOption = '<option value="' + newString + '">' + newString + '</option>'; $("#select").prepend(newOption); // trigger the update event $("#select").trigger("chosen:updated"); // tell chosen to close the list box $("#select").trigger("chosen:close"); return true; } // otherwise, just let the event bubble up return true; } } )
我已经更新了3nochroot的代码。 现在我只有一个select器来查找多选input。
$(document).ready(function() { $(".js-choicelist").chosen({ //config comes here }).parent().find('.chosen-container .search-field input[type=text]').keydown( function (evt) { var stroke, _ref, target, list; // get keycode stroke = (_ref = evt.which) != null ? _ref : evt.keyCode; // If enter or tab key if (stroke === 9 || stroke === 13) { target = $(evt.target); // get the list of current options chosenList = target.parents('.chosen-container').find('.chosen-choices li.search-choice > span').map(function () { return $(this).text(); }).get(); // get the list of matches from the existing drop-down matchList = target.parents('.chosen-container').find('.chosen-results li').map(function () { return $(this).text(); }).get(); // highlighted option highlightedList = target.parents('.chosen-container').find('.chosen-results li.highlighted').map(function () { return $(this).text(); }).get(); // Get the value which the user has typed in var newString = $.trim(target.val()); // if the option does not exists, and the text doesn't exactly match an existing option, and there is not an option highlighted in the list if ($.inArray(newString,matchList) < 0 && $.inArray(newString,chosenList) < 0 && highlightedList.length == 0) { // Create a new option and add it to the list (but don't make it selected) var newOption = '<option value="' + newString + '">' + newString + '</option>'; var choiceSelect = target.parents('.select-multiple').find('select'); choiceSelect.prepend(newOption); // trigger the update event choiceSelect.trigger("chosen:updated"); // tell chosen to close the list box choiceSelect.trigger("chosen:close"); return true; } // otherwise, just let the event bubble up return true; } } )
}）
