Here I will show you how to declare the notation to load a custom Javascript file to your page. The example here can be used for any type of application and you can improve it as you please.

The example below loads a list of regions based on the select country.

I will take in consideration you have already your custom extension Namespace_Package in place. So, go to the .phtml file you want to load your Javascript from and add the following code:

<script type="text/x-magento-init">
    {
        "*": {
            "Namespace_Package/js/my_filename": {
                "AjaxUrl": "/module/index/index"
            }
        }
    }
</script>

As you can see above, by using script type=”text/x-magento-init” we are declaring the file and sending some parameters through. You can add as many parameters as you want.

Now lets create the js file to be loaded. Create it in app/code/Namespace/Package/view/frontend/web/js/my_filename.js and add the following content for instance

define([
    'jquery',
    'underscore',
    'mage/template'
], function (
    $,
    _,
    template
) {
    function main(config, element) {
        var $element = $(element);
        var URL = config.AjaxUrl;

        $(document).on('change','#country',function() {
            var param = 'ajax=1';
            $.ajax({
                showLoader: true,
                url: URL,
                data: param,
                type: "GET",
                dataType: 'json'
            }).done(function (data) {
                var html = template('#region_template', {posts:data});
                $('#some_tag_id').html(html);
            });
        });
    };
    return main;
});

In the example above, it makes an Ajax call to return some json data and use it to populate a dropdown with a list of regions based on the chosen country.

In case you interested, here is template ‘#region_template’ used to populate the ‘select’ tag.

<div id="region_template" style="display: none;">
    <select name="some_name" id="some_id">
        <option value=""></option>
        <% _.each(posts, function(text,value) { %>
        <option value="<%= value %>"><%= text %></option>
        <% }) %>
    </select>
</div>

That’s it. Redeploy your static files and clean your cache.

Happy Coding!

References

http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/javascript/js_init.html

Magento 2 JS component in a PHTML templatehttps://i0.wp.com/blog.mdnsolutions.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-10-at-3.14.21-PM.png?fit=988%2C334&ssl=1https://i0.wp.com/blog.mdnsolutions.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-10-at-3.14.21-PM.png?resize=150%2C150&ssl=1Renato MedinaMagentoMagento 2JS,Knockoutjs,load,Magento 2,phtml,x-magento-initHere I will show you how to declare the notation to load a custom Javascript file to your page. The example here can be used for any type of application and you can improve it as you please. The example below loads a list of regions based on the select...A Magento Craftsman in Melbourne