淘汰赛和 Select2 获得选定的对象

Question

我正在做一个项目，我使用 .net web api、knout，在这个例子中是 jquery 插件select2。

我想做的是在选择更改后设置一些字段值。 select2 控件列表在 ajax 调用之后加载，并且对象包含的数据不仅仅是 id 和文本。 我怎样才能得到其余的数据，所以我可以用它填充其他输入？ 不久，我尝试在更改选择后更新视图模型（但是当这个插件进行 ajax 调用时我得到了数据）。

这是所选对象应包含的示例数据：

{
   "Customer":{
      "ID":13,
      "No":"0000012",
      "Name":"SomeName",
      "Address":"SomeAddress",
      "ZipCode":"324231",
      "City":"SimCity",
      "Region":"SS",
      "Phone":"458447478",
      "CustomerLocations":[]
   }
}

这是我现在的位置：

示例 html：

<input type="hidden" data-bind="select2: { optionsText: 'Name', optionsValue: 'ID', sourceUrl: apiUrls.customer, model: $root.customer() }, value: CustomerID" id="CustomerName" name="CustomerName" />
<input type="text" data-bind="........" />
<input type="text" data-bind="........" /> 
etc...

这是自定义绑定：

ko.bindingHandlers.select2 = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var obj = valueAccessor(),
            allBindings = allBindingsAccessor();

        var optionsText = ko.utils.unwrapObservable(obj.optionsText);
        var optionsValue = ko.utils.unwrapObservable(obj.optionsValue);
        var sourceUrl = ko.utils.unwrapObservable(obj.sourceUrl);
        var selectedID = ko.utils.unwrapObservable(allBindings.value);
        var model = ko.utils.unwrapObservable(obj.model);//the object that i need to get/set

        $(element).select2({
            placeholder: "Choose...",
            minimumInputLength: 3,
            initSelection: function (element, callback) {
                if (model && selectedID !== "") {
                    callback({ id: model[optionsValue](), text: model[optionsText]() });
                }
            },
            ajax: {
                quietMillis: 500,
                url: sourceUrl,
                dataType: 'json',
                data: function (search, page) {
                    return {
                        page: page,
                        search: search
                    };
                },
                results: function (data) {
                    var result = [];
                    $.each( data.list, function( key, value ) {
                        result.push({ id: value[optionsValue], text: value[optionsText] });
                    });
                    var more = data.paging.currentPage < data.paging.pageCount;
                    return { results: result, more: more };
                }
            }
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).select2('destroy');
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var obj = valueAccessor(),
            allBindings = allBindingsAccessor();

        var model = ko.utils.unwrapObservable(obj.model);//the object that i need to get/set
        var selectedID = ko.utils.unwrapObservable(allBindings.value);

        $(element).select2('val', selectedID);

        $(element).on("change", function (e) {
            //...
        });
    }
};

获取选中的id或者text是没有问题的，但是ajax调用后如何不丢失剩下的信息呢？ 我在哪里可以设置/获取这个对象，以便我可以拥有它包含的所有数据？

谢谢

Answer 1

当您为结果构建对象字面量时，将完整对象添加为“数据”属性。

result.push({ id: value[optionsValue], text: value[optionsText], data: value });

然后处理select2抛出的select2-selected事件。事件对象 this 应该包含你的对象字面量作为选择属性。

$element.on('select2-selected', function(eventData) {
    if ( eventData.choice ) {
        // item selected
        var dataObj = eventData.choice.data;
        var selectedId = eventData.choice.id;
    } else {
        // item cleared

    }
});

Answer 2

对于select2 v4，你可以使用$(elem).select2('data')来获取选中的对象。

$('selected2-enabled-elements').on('change', function(e) {
    console.log($(this).select2('data'));
});

示例：https://jsfiddle.net/calvin/p1nzrxuy/

Answer 3

对于 v4.0.0 之前的 select2 版本，您可以这样做：

.on("select2-selecting", function (e) {
    console.log(e.object);
})

从 v4.0.0 及更高版本开始，以下内容应该可以工作：

.on("select2-selecting", function (e) {
    $(this).select2('data')
})