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

Posted 2023-03-09

【中文标题】淘汰赛和 Select2 获得选定的对象

【英文标题】：knockout and Select2 get selected object

【发布时间】：2014-03-17 10:54:00

【问题描述】：

我正在做一个项目，我使用 .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调用后如何不丢失剩下的信息呢？ 我在哪里可以设置/获取这个对象，以便我可以拥有它包含的所有数据？

谢谢

【参考方案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

    
);

【讨论】：

我尝试了这个建议，但在choice 属性中没有看到名为data 的属性。

支架放错了位置。编辑答案以确保数据属性设置正确

艾伦，您的编辑被拒绝了，但它是正确的。我已经修复了代码...谢谢。

【参考方案2】：

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

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

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

【参考方案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')
)