允许使用selected.js多选的新值

Question

我正在使用selected.js插件http://harvesthq.github.com/chosen/和jQuery来允许用户从select中选择多个选项.但是,我现在希望能够让他们创造尚未存在的价值 - 任何想法如何解决这个问题？

编辑:与SO自己的标签选择/创建栏类似的东西将接近我所追求的

最好不要更改或编辑插件,但如果需要,也可以.

代码: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();
});

因此,如果用户输入"第三选项",我想将其添加到列表中并将其选中.值和显示名称是/将是相同的,所以这不是一个问题

Answer 1

根据文档,您可以尝试这样做:

$('select').append('<option>test</option>');
$('select').trigger('liszt:updated');

正如托尼在下面的评论中所说:

"从版本1.0开始,现在选择触发器:已更新".请参阅harvesthq.github.io/chosen/#change-update-events "

Answer 2

我偶然发现了同样的想法.看起来它是一个非常受欢迎的功能请求,并且有几个叉实现了它.看起来它很快就会合并到主分支中.

+1这个特殊的拉动有魅力:https: //github.com/harvesthq/chosen/pull/166

你可以在这里查看Koenpunt的分支:https://github.com/koenpunt/chosen

Answer 3

这是我做的一个简单的方法:

$(".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');
    }
});

Answer 4

我只是想解决同样的问题.我稍微修改了源代码.这是新的keyup_checker函数.看一下案例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();
  }
};

Answer 5

我知道这不是答案,而是另一种解决方案.

我正在寻找即时添加部分,并发现http://ivaynberg.github.com/select2/#tags提供了与选择+"其他东西"相同的东西,如"标记".