How do I call the function while onchange in jquery?

Question

I have created a template to display drop-down fields in the backend. The first field contains Attributes and the second field contains options.

I am struggling to call the getOptions function in below line. It shows error is ABC is not defined. Please provide me a solution to call a function while creating the select field

I'm using Magento 2.2.1.

var html = .....onchange = abc.getOptions()>

test.phtml

<div class="fieldset-wrapper customer-information">
    <div class="fieldset-wrapper-title">
        <span class="title">
            <?= $block->escapeHtml(__('Attribute and Options')) ?>
        </span>
    </div>
    <input id="btnAdd" type="button" value="Add" />
    <br />
    <br />
    <div id="TextBoxContainer">
    </div>
    <br />
</div>
<script>
    require([
        'jquery',
        "jquery/ui",
        'mage/multiselect',
        "mage/mage"

    ], function ($) {
        var abc = {
            itemsCount: 0,
            template: function (index) {
                alert("dsfsdfbd");
                var html = '<td><input type="hidden" name="filters[' + index + '][filter_id]"  value="" id="filters_' + index + '_filter_id"/>' + '<select class="form-control" id = "filters_' + index + '_attribute_code" name="filters[' + index + '][attribute_code]" onchange = abc.getOptions()>' + '<option value="">-- Please select --</option>';
        <? php $attributes = $block -> getAttributes(); ?>
        <? php foreach($attributes as $attribute): ?>
        var label = '<?php echo $attribute->getFrontendLabel(); ?>';
                var attr_code = '<?php echo $attribute->getAttributeCode() ?>';
                html += '<option value= "' + attr_code + '">' + label + '</option>';
        <? php endforeach; ?>
                    html += '</select></td><td><select class="form-control-options" id = "filters_' + index + '_option_id" name="filters[' + index + '][option_id]" ><option value="">-- Please select --</option></select>' + '<input type="button" value="Remove" class="remove" /></td>';

                return html;

            },
            addItem: function () {
                alert("hello add item");
                var data = {
                    filter_id: '',
                    attribute_code: '',
                    option_id: '',
                    index: this.itemsCount++
                };
                data.filter_id = arguments[0];
                data.attribute_code = arguments[1];
                data.option_id = arguments[2];
                return abc.template(data.index);
            },
            getOptions: function (attribute) {
                alert("options");

            }
        };

        $("#btnAdd").bind("click", function () {
            alert('reterter');
            var div = $("<div />");
            div.html(abc.addItem());
            $("#TextBoxContainer").append(div);
        });
  <? php
  if ($this -> getFilters()):
    foreach($this -> getFilters() as $filter):
    ?>
        abc.addItem('<?php echo $filter->getId() ?>', '<?php echo $filter->getAttributeCode() ?>', '<?php echo $filter->getOptionId() ?>');
    <? php
        endforeach;
  endif;
  ?>
  });
</script>

Answer 1

Your code has syntax error

you need to have ""

    onchange = "abc.getOptions()"