根据 dxSelectBox 选择更新 dxTextboxes - Devextreme

Question

我已经搜索过，但似乎找不到适合我情况的合适方法。

我的 Devextreme 应用程序中有一个 dxSelectBox。此 dxSelectBox 中的数据来自自定义数据源。然后我的页面上有几个 dxTextBoxes。基于 dxSelectBox 的选择，我想用仅适用于所选项目的数据填充 dxTextBoxes。

这是我的 dxSelectBox 设计代码

                <div class="dx-field">
                <div class="dx-field-label">Site: </div>
                <div class="dx-field-value" id="cboSite" data-bind="dxSelectBox: { dataSource: siteStore, displayExpr: 'SiteName',value:'SiteID', onItemClick: GetBoxValue}"></div>
            </div>

然后，我将数据加载到我的 JS 文件中，如下所示：

         var url = 'URL/GetSites';

     //   CustomerSite = $("#mySelectBoxID").dxSelectBox('instance').option('value');

     var siteStore = new DevExpress.data.CustomStore({
         load: function (loadOptions) {

             return $.ajax({
                 type: 'GET',
                 url: url,
                 data: {},
                 cache: true,
                 dataType: "jsonp",
                 success: function (result) {
                     console.log(JSON.stringify(result));

                 },
                 error: function (xhr, status, error) {
                     console.log(JSON.stringify(xhr));
                     console.log(JSON.stringify(status));
                     console.log(JSON.stringify(error));
                 }

             });

         },
         totalCount: function (loadOptions) {
             return 0;
         }
     });

      function GetBoxValue() {

         alert($("#cboSites").dxSelectBox('instance').option('value')),  

     };

从我的服务发送的是名称、代码、ID、站点 ID、站点名称。

我想在 cboSites 下拉列表中选择站点名称，然后应用程序必须使用名称、代码和 ID 值填充字段。

有人可以指导我吗？

Answer 1

在您的情况下，您可以使用 Knockout Computed Observables 检查选择框所选项目何时更改。所以，代码可以像下面这样：

var selectedItem = ko.observable(null),
    name = ko.observable(""),
    id = ko.observable(""),
    code = ko.observable("");

ko.computed(function(){
    var value = selectedItem();
    if(value) {
      name(value.name);
      id(value.id);
      code(value.code);
    }
});

此处有 selectedItem 值，其中包含当前选定的选择框值。此外，还有 name、id 和 code 值包含所选项目的特定字段。

当 selectedItem 更改时，ko.computed 函数将触发并更新相关值。

我在这里创建了一个小示例 - http://jsfiddle.net/e6wra6p8/

您还可以在 documentation 中找到有关 dxSelectBox 小部件的 selectedItem 选项的更多信息。

根据 dxSelectBox 选择更新 dxTextboxes - Devextreme

Update dxTextboxes based on dxSelectBox selection - Devextreme

jquery

devextreme