我试图在粘贴某些内容时将函数绑定(bind)到选择字段(在允许多种样式和 select2:matcher/tokenize 之后它看起来像一个输入字段)但是在 IE 中它总是 chop 任何包含换行符。

<form method="POST" action="/run" class="ui-widget" onsubmit=" return confirmSubmit(this, 'run',true) ">
    Editor:
    <select name="editor" id="editor" multiple style="width: 200px">
        <option>ALL</option>
    </select>
        <input type="submit" value="Submit">
 </form>

bind('paste')似乎不适用于 <select>对象所以我不得不使用 bind('change')

var unitIds = ["Red","Yellow","Green"];

$.each(unitIds, function(i, f) {
        $('select[name="editor"]').append($('<option>').text(f));
    });

$('#pastefromclip').select2({
    matcher: function(term, text) {
                    return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
                },
    tokenizer: function(input, selection, callback) {
                    if (input.indexOf(" ") < 0) return;
                    var parts = input.split(" ");
                for (var i = 0; i < parts.length; i++) {
                    var part = parts[i];
                    if(part.length > 0){
                        if (unitIds.indexOf(part) == -1) {
                            alert('Invalid fields: ' + part);
                        } else {
                            callback({
                                id: part,
                                text: part
                                });
                            }
                        }
                    }
                }
});
$('#editor').bind('change', function (e) {
            var clipped = window.clipboardData.getData('Text');
            clipped = clipped.replace(/(\r\n|\n|\r)/gm, " "); //replace newlines with spaces
            //$(this).val(clipped); // this doesn't seem to work
            var element = document.getElementById('editor');
            element.value = clipped; // doesn't seem to work either
            return false; //cancel the pasting event
        });

1. 将以下内容复制并粘贴到选择字段中:
   红色
   黄色

2. 它只粘贴“红色”并显示匹配的对象。在我选择匹配的对象并且它被标记化之前，它不会识别更改函数。

3. 识别到该更改后，它会遍历 clipboardData 并同时看到红色和黄色，但它无法为选择字段分配该数据。

   <script src="https://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.jqgrid.showhidecolumnmenu.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/jquery-1.8.3.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/jquery-ui-1.9.2.js"></script>
   <script type="text/javascript" src="javascript/toastr.min.js"></script>
   <script type="text/javascript" src="javascript/adminConsole.js"></script>
   <script type="text/javascript" src="javascript/select2.min.js"></script>
   <script type="text/javascript" src="javascript/moment.min.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/ui.multiselect.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/grid.locale-en.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/jquery.jqGrid.min.js"></script>
   

最佳答案

对多个输入使用 TokenSeparators

See it Action

    $(".js-example-tokenizer").select2({
  tags: true,
  tokenSeparators: [',', ' ']
})

请参阅 Select2 Tokenization 中的自动标记化部分

此外，当复制粘贴选项(红色绿色)时，不要忘记在最后附加“，”

关于javascript - 如何设置选择的值以匹配和标记jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30889799/