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?