Question

我正在使用select2，并注意到如果HTML中没有提供option（忽略下面显示的空白以允许占位符工作），它将不允许我动态添加我的自己的选择。通常，当有其他选项时，它会创建一个标记并将其插入结果列表中。

我有templateResult和templateSelection，可以显示带有选项文字左侧图片的下拉选项。

jQuery的：

$('select').select2({
    placeholder: "Select or enter a {{ $itemType->itemTypeName }}",
    createTag: function (params) {
        return {
            id: params.term,
            text: params.term,
            newOption: true
        }
    },
    templateResult: function (option) {
        if(!option.id)
            return option.text;

        if(option.newOption) {
            $result.text(option.text);
            $result.append(" <em>(NEW)</em>");
        }
        else {
            var optimage = $(option.element).data('image'); 
            var $optItem = '<span>';
            if(optimage)
                $optItem += '<div style="display:inline-block; width:40px; text-align:center; margin-right:10px;"><img src="' + optimage + '" style="max-height:40px; max-width:40px; margin:0; vertical-align:middle;" /></div>';
            $optItem += $(option.element).text() + '</span>';

            $result = $($optItem);
        }
        return $result;
    },
    templateSelection: function (option) {
        if(!option.id) {
            return option.text;
        }
        var image = $(option.element).data('image');
        if(!image){
            return option.text;
        }
        else { 
            var $item = '<span>';
            $item += '<div style="display:inline-block; width:40px; text-align:center; margin-right:10px;"><img src="' + image + '" height="40px" style="margin:0; vertical-align:middle;" /></div>';
            $item += $(option.element).text() + '</span>';
            return $($item);
        }
    },
    tags: true,
    selectOnBlur: true,
    multiple: false
});

HTML：

<select id="itemID" name="itemID" required>
    <option></option>
</select>

如果<select>中有包含数据的选项，则jquery代码会创建一个新标记，templateResult函数会将其添加到列表中并使用“（NEW） “在它之后，用户可以选择这个新创建的选项，就像它一直存在一样。

当没有包含数据的选项时，templateResult函数会尝试执行$result.text(option.text);但它失败，因为还没有$result。

当我尝试添加新选项时如何创建$result？

Select2：如何在列表为空时动态添加选项

0 个答案: