I have 3 dx-selects they need to be related to each other

Question

When I select the first selectbox, the other selectbox should also show its subcategories, but I couldn't do that. It says it's done with onValueChanged but I can't do it. I'm not very good at javascript how can I do this? When I did it with the normal html select option, I did it with the value value, but I can't do it with dx-select

<div class="Marka">
            <div class="dx-field">
                <h3>Marka</h3>
              <div class="dx-field-value">
                <div id="searchBox"></div>
              </div>
            </div>

$(() => {
  const searchBox = $('#searchBox').dxSelectBox({
    dataSource: products,
    displayExpr: 'Name',
    valueExpr: 'ID',
    searchEnabled: true,
  }).dxSelectBox('instance');
  const productsDataSource = new DevExpress.data.DataSource({
    store: {
      data: simpleProducts,
      type: 'array',
      key: 'ID',
    },
  });
  $('#editBox').dxSelectBox({
    dataSource: productsDataSource,
    displayExpr: 'Name',
    valueExpr: 'ID',
    value: simpleProducts[0].ID,
    acceptCustomValue: true,
    onValueChanged(data) {
      const $result = $('.current-value');

      if (data.value !== null) {
        const selectedItem = data.component.option('selectedItem');
        $result.text(`${selectedItem.Name} (ID: ${selectedItem.ID})`);
      } else {
        $result.text('Not selected');
      }
    },
    onCustomItemCreating(data) {
      if (!data.text) {
        data.customItem = null;
        return;
      }
      const productIds = simpleProducts.map((item) => item.ID);
      const incrementedId = Math.max.apply(null, productIds) + 1;
      const newItem = {
        Name: data.text,
        ID: incrementedId,
      };
      data.customItem = productsDataSource.store().insert(newItem)
        .then(() => productsDataSource.load())
        .then(() => newItem)
        .catch((error) => {
          throw error;
        });
    },
  });
  $('#searchModeOption').dxSelectBox({
    items: ['contains', 'startswith'],
    value: 'contains',
    onValueChanged(e) {
      searchBox.option('searchMode', e.value);
    },
  });
  $('#searchExprOption').dxSelectBox({
    items: [{
      name: "'Name'",
      value: 'Name',
    }, {
      name: "['Name', 'Category']",
      value: ['Name', 'Category'],
    }],
    displayExpr: 'name',
    valueExpr: 'value',
    value: 'Name',
    onValueChanged(e) {
      searchBox.option('searchExpr', e.value);
    },
  });
  $('#searchTimeoutOption').dxNumberBox({
    min: 0,
    max: 5000,
    value: 200,
    showSpinButtons: true,
    step: 100,
    onValueChanged(e) {
      searchBox.option('searchTimeout', e.value);
    },
  });
  $('#minSearchLengthOption').dxNumberBox({
    min: 0,
    max: 5,
    value: 0,
    showSpinButtons: true,
    onValueChanged(e) {
      searchBox.option('minSearchLength', e.value);
    },
  });
  $('#showDataBeforeSearchOption').dxCheckBox({
    value: false,
    text: 'Show Data Before Search',
    onValueChanged(e) {
      searchBox.option('showDataBeforeSearch', e.value);
    },
  });
});
const simpleProducts = [
  { Name: 'Markalar', ID: 0 },  
  { Name: 'Alfa Romeo', ID: 1  },
  { Name: 'Aston Martin', ID: 2 },
  { Name: 'Audi', ID: 3 },
  { Name: 'Bentley', ID: 4 },
  { Name: 'BMW', ID: 5 },
  { Name: 'Cadillac', ID: 6 },
  { Name: 'Chevrolet', ID: 7 },
  { Name: 'Chrysler', ID: 8 },
  { Name: 'Citroen', ID: 9 },
];
const products = [{
  ID: 1,
  Name: 'Alfa Romeo',
  Price: 330,
  Current_Inventory: 225,
  Backorder: 0,
  Manufacturing: 10,
  Category: 'Marka',
  ImageSrc: 'images/products/1.png'
}, {
  ID: 2,
  Name: 'Aston Martin',
  Price: 400,
  Current_Inventory: 150,
  Backorder: 0,
  Manufacturing: 25,
  Category: 'Marka',
  ImageSrc: 'images/products/2.png',
}, {
  ID: 3,
  Name: 'Audi',
  Price: 2400,
  Current_Inventory: 0,
  Backorder: 0,
  Manufacturing: 0,
  Category: 'Marka',
  ImageSrc: 'images/products/3.png',
}, {
  ID: 4,
  Name: 'Bentley',
  Price: 1600,
  Current_Inventory: 77,
  Backorder: 0,
  Manufacturing: 55,
  Category: 'Televisions',
  ImageSrc: 'images/products/4.png',
}, {
  ID: 5,
  Name: 'BMW',
  Price: 1450,
  Current_Inventory: 445,
  Backorder: 0,
  Manufacturing: 0,
  Category: 'Televisions',
  ImageSrc: 'images/products/5.png',
}, {
  ID: 6,
  Name: 'Cadillac',
  Price: 1350,
  Current_Inventory: 345,
  Backorder: 0,
  Manufacturing: 5,
  Category: 'Televisions',
  ImageSrc: 'images/products/6.png',
}
];

> type here

Answer 1

I solved the problem this site was very helpful https://supportcenter.devexpress.com/ticket/details/e5000/selectboxes-for-devextreme-how-to-implement-standalone-and-in-form-cascading-selectboxes

    enter<div class="arac dx-fieldset">
        <div class="Marka">
            <div class="dx-fieldset-header"></div>
            <div class="dx-field">
                <h3>Marka</h3>
              <div class="dx-field-value">
                <div id="markaSelectBox"></div>
              </div>
            </div>
        </div>
        <div class="Model">
            <div class="dx-fieldset-header"></div>
            <div class="dx-field">
                <h3>Model</h3>
              <div class="dx-field-value">
                <div id="modelSelectBox"></div>
              </div>
            </div>
        </div>
        <div class="Parca">
            <div class="dx-fieldset-header"></div>
            <div class="dx-field">
                <h3>Parça</h3>
                <div class="dx-field-value">
                    <div id="parcaSelectBox"></div>
                </div>
            </div>


        </div>
    </div> 



 <script>
    $(function(){
        $("#markaSelectBox").dxSelectBox({
            dataSource: markalar,
            valueExpr: "ID",
            displayExpr: "Name",
            showClearButton: true,
            searchEnabled: true,
            onValueChanged: function(e) {
                let dataSource = modelSelectBox.getDataSource();
                dataSource.filter("MarkaID", "=", e.value);
                dataSource.load();
                modelSelectBox.option("value", null);
            }
        });
        let modelSelectBox = $("#modelSelectBox").dxSelectBox({
            dataSource: modeller,
            valueExpr: "ID",
            displayExpr: "Name",
            searchEnabled: true,
        }).dxSelectBox("instance");
        $("#markaModelForm").dxForm({
            FormData: toplam,
            onFieldDataChanged: function(e){
                if(e.dataField === "MarkaID"){
                    let modelEditor = e.component.getEditor("ModelID");
                    modelEditor.getDataSource().filter(['MarkaID', '=', e.value]);
                    modelEditor.getDataSource().load();
                    e.component.updateData("ModelID", null);
                }
            },
            items:[
                //marka itemi
                {
                    label: {text: "Marka"},
                    dataField: "MarkaID",
                    editorType: "dxSelectBox",
                    editorOptions: {
                        dataSource: markalar,
                        valueExpr: "ID",
                        displayExpr: "Name",
                        showClearButton: true,
                    }
                },
                //model itemi
                {
                    label: {text: "Model"},
                    dataField: "ModelID",
                    editorType: "dxSelectBox",
                    editorOptions: {
                        dataSource: modeller,
                        valueExpr: "ID",
                        displayExpr: "Name"
                    }
                },    
                            //model itemi
                {
                    label: {text: "Parca"},
                    dataField: "ParcaID",
                    editorType: "dxSelectBox",
                    editorOptions: {
                        dataSource: parcalar,
                        valueExpr: "ID",
                        displayExpr: "Name"
                    }
                },        //model itemi
                {
                    label: {text: "Parca"},
                    dataField: "ParcaID",
                    editorType: "dxSelectBox",
                    editorOptions: {
                        dataSource: parcalar,
                        valueExpr: "ID",
                        displayExpr: "Name"
                    }
                }
            ]
    
        });
    });
    $(function(){
        $("#modelSelectBox").dxSelectBox({
            dataSource: modeller,
            valueExpr: "ID",
            displayExpr: "Name",
            showClearButton: true,
            searchEnabled: true,
            onValueChanged: function(e) {
                let dataSource = parcaSelectBox.getDataSource();
                dataSource.filter("ModelID", "=", e.value);
                dataSource.load();
                parcaSelectBox.option("value", null);
            }
        });
        let parcaSelectBox = $("#parcaSelectBox").dxSelectBox({
            dataSource: parcalar,
            valueExpr: "ID",
            displayExpr: "Name",
            searchEnabled: true,
        }).dxSelectBox("instance");
        $("#markaModelForm").dxForm({
            FormData: toplam,
            onFieldDataChanged: function(e){
                if(e.dataField === "ModelID"){
                    let parcaEditor = e.component.getEditor("ParcaID");
                    parcaEditor.getDataSource().filter(['ModelID', '=', e.value]);
                    parcaEditor.getDataSource().load();
                    e.component.updateData("ParcaID", null);
                }
            },
    
        });
    });
    var toplam = { MarkaID: null, ModelID: null, ParcaID: null }
    var markalar = [
      { Name: 'Markalar', ID: 0 },  
      { Name: 'Alfa Romeo', ID: 1  },
      { Name: 'Aston Martin', ID: 2 },
      { Name: 'Audi', ID: 3 },
      { Name: 'Bentley', ID: 4 },
      { Name: 'BMW', ID: 5 },
      { Name: 'Cadillac', ID: 6 },];
    var modeller = [{
        "ID":1,
        "Name": "6",
        "MarkaID": 1
    },{
        "ID":2,
        "Name": "33",
        "MarkaID": 1
    },{
        "ID":3,
        "Name": "75",
        "MarkaID": 1
    },{
        "ID":4,
        "Name": "90",
        "MarkaID": 1
    }];
    var parcalar = [{
        "ID":1,
        "Name": "Abs ve fren sensörleri",
        "ModelID": 1
    },{
        "ID":2,
        "Name": "El fren teli",
        "ModelID": 1
    },{
        "ID":3,
        "Name": "Fren aksesuar seti",
        "ModelID": 1
    },
    {
        "ID":4,
        "Name": "Fren Balatası",
        "ModelID": 1
    },
    ]
    </script>