How to get value from Ui-select in js magento2 at page load

Question

I have created field in phtml and want to get values from multi-select dropdown inside js.

Inside phtml

 <form id="attr-form" action="<?php echo $block->getUrl('*/*/save') ?>" enctype="multipart/form-data" method="post"  data-mage-init='{"validation":{}}'>
    <div id="printmessage" class="alert alert-success"></div>    
    <fieldset class="fieldset">
            <div class="field required">
                <label class="label"><?php echo __('Label') ?>:</label>
                <div data-bind="scope: 'customLabel'">
                    <!-- ko template: getTemplate() --><!-- /ko -->
                </div>
                <script type="text/x-magento-init">
                    {
                        "*": {
                            "Magento_Ui/js/core/app": {
                                "components": {
                                    "customLabel": {
                                        "component": "MyModule_Module/js/ui-select",
                                        "template" : "MyModule_Module/ui-select",
                                        "filterOptions": true,
                                        "levelsVisibility": "1",
                                        "multiple": true,
                                        "showCheckbox": true,
                                        "options": <?php echo $block->getCollectionTree()?>
                                    }
                                }
                            }

Inside js/ui-select.js

define([
    'Magento_Ui/js/form/element/ui-select',
    'jquery'
], function (Select, $) {
    'use strict';

    return Select.extend({
});
});

If i call initialize inside Select.extend({ }), multiselect dropdown throws error. How to get selected value when i press save button in toolbar.And how to preselect options on page load?

Answer 1

try this

define([
    'jquery',
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select'
], function ($, _, uiRegistry, select) {
    'use strict';

    return select.extend({
        initialize: function (){
            var status = this._super().initialValue;
            console.log("On Load");
            return this;
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            //return this._super();
            console.log("Update");
        },

    });
});