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，SiteID，SiteName。

我想在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值，其中包含当前所选的selectbox值。此外，还有name，id和code值包含所选项目的特定字段。

更改selectedItem后，ko.computed功能会触发并更新相关值。

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

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

根据dxSelectBox选择更新dxTextboxes - Devextreme

1 个答案: