Magento 2 : how to clear selected Value form Custom UI Component select(Dropdown)

Question

Custom ui component select(Dropdown)

<select class="admin__control-select" data-bind="  
    event:{ change: selectOptionCategory(uid)},  
    attr: {  
        name: inputName,  
        id: uid,  
        disabled: disabled,  
        'aria-describedby': noticeId  
    },  
    hasFocus: focused,  
    optgroup: options,  
    value: value,  
    optionsCaption: caption,  
    optionsValue: 'value',  
    optionsText: 'label'"/>  

Custom ui component js

define([  
    'jquery',  
    'Magento_Ui/js/form/element/select'  
], function ($, Select) {  
    'use strict';  
    return Select.extend({  
        defaults: {  
            customName: '${ $.parentName }.${ $.index }_input'  
        },  
        /**  
        * Change currently selected option  
        *  
        * @param {String} id  
        */  
        selectOptionCategory: function(id){  
            if(($("#"+id).val() != 0)) {  
                $('div[data-index="cms_page"] select').val("");  
            }  
        },  
    });  
});  

I want to clear selected value of cms_page dropdown when I click category dropdown but it give old value

Answer 1

Added following function

onUpdate: function () {
    this._super();
    console.log(this.value())
}

Now you components looks like

define([
    'jquery',
    'Magento_Ui/js/form/element/select'
], function ($, Select) {
    'use strict';
    return Select.extend({
        defaults: {
            customName: '${ $.parentName }.${ $.index }_input'
        },
        onUpdate: function () {
            this._super();
            if((this.value() != 0)) {
                $('div[data-index="cms_page"] select').val("");
            }
        },
    });
});