Question

我正在听取所选生成的输入元素的更改。不知何故，当我触发chosen:updated时，输入元素中的文本将不会呈现。

一个简单的演示：

<div style="width: 400px" class="parent row">
    <div class="col-lg-12">
        <select  multiple="multiple" class="tags"></select>
    </div>
</div>

的javascript：

$(".tags").chosen({    
    width: '50%',
});

var select = $(".tags");
var input = $(".parent input");

input.on('input', function() {
    var option = $("<option value='bob'>bob</option>");
    select.append(option);

    // Below causes input to stop rendering text in input element
    select.trigger('chosen:updated');
});

这是jsfiddle demo。我可能没有正确地这样做。我想要完成的是在输入框中进行一些编辑后获取当前文本，将其发送到服务器进行处理，然后将结果呈现为所选的选项。

我如何选择这样做？上述方法可以正常工作，只是在用户输入内容后才会呈现文本。

Answer 1

您可以让用户输入内容，并在用户按Enter键时将其添加到select-options列表中。所以喜欢：

$(".tags").chosen({    width: '50%',
              });

var select = $(".tags");
var input = $(".parent input");


input.keydown(function(e) {
    if(e.keyCode == 13){
        var option = $("<option></option>").html(input.val());
        select.append(option);
        select.trigger('chosen:updated');
    }
});

Here is a fiddle with the result.

Answer 2

我转而使用selectize。它甚至支持bootstrap！

selected：更新的触发器阻止文本在输入中呈现

2 个答案: