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?

0

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 '20 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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