0

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?

1 Answer 1

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");
        },

    });
});
1
  • its working!! ..
    – user90874
    Nov 25, 2020 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.