Simualating user clicks using JavaScript or JQuery

var dynamicOptions = (function () {

    var url; // here you can add your url to the backend script
    // urlList only required for demo because no backend available
    var urlList = ['http://www.mocky.io/v2/54839e2a2f4b84a0041bba49',
        'http://www.mocky.io/v2/54839e4c2f4b84a5041bba4a',
        'http://www.mocky.io/v2/54839e6a2f4b84a9041bba4b'];
    
    var cc = 0; // click counter

    // e.g. $optionEl = $('#firstSelection');
    // $nextOptionEl = $('#secondSelection');
    function Selector($optionEl, $nextOptionEl) {
        this.$optionEl = $optionEl;
        this.$nextOptionEl = $nextOptionEl;
       
        this.ajaxRequest = function (optionValue) {
            return $.ajax({
                type: 'GET', // later 'POST'
                //data: {'data': optionValue}, // for posting
                url: url,
                contentType: "application/json",
                dataType: 'jsonp',
                context: this,
            });
        };
      
        this.getData = function(value) {
            url = urlList[value]; // simulating backend returns based on this value
            var ajaxReq = this.ajaxRequest(value); // this.value not used in this demo
            ajaxReq.success(this.jsonCallback)
                .fail(function (xhr) {
                alert("error" + xhr.responseText);
            });
        };
        // handle click and change event. Source from here: https://stackoverflow.com/questions/11002421/jquery-event-to-fire-when-a-drop-down-is-selected-but-the-value-is-not-change
        this.clickHandler = function ($element) {
            //console.log($element);
            var that = this;
            return $element.click(function () {
                //console.log('clicked');
                cc++;
                if (cc == 2) {
                    $(this).change();
                    cc = 0;
                }
            }).change(function (e) {
                cc = -1; // change triggered
                //console.log(this.value);
                that.getData(this.value);
            });
        }

        this.clickHandler($optionEl);

        this.jsonCallback = function (json) {
            var $nextEl = this.$nextOptionEl;
            $nextEl.empty();                    // clear selection
            $nextEl.prop('disabled', false);    // enable 2nd select
           
            this.triggerChangeEvent(); // maybe a check if they really changed would be good
            $.each(json.data, function (index, value) {
                $('<option/>')
                    .val(index)
                    .text(value)
                    .appendTo($nextEl);
            });
        };

        this.triggerChangeEvent = function () {
            var event = jQuery.Event("optionsChanged");
            event.context = this;
            event.message = "Options changed, update other depending options";
            event.time = new Date();

            $.event.trigger(event);
        };
    }

    return {
        Selector: Selector
    }; // make Selector public
})();

$(function () {
    var $first = $('#firstSelection');
    var $second = $('#secondSelection');
    var $third = $('#thirdSelection');

    // use our dynamic options selector class
    var options12 = new dynamicOptions.Selector($first, $second);
    var options23 = new dynamicOptions.Selector($second, $third);

    $(document).on('optionsChanged', function (e) {
        console.log("options changed", e);
        var obj_id = e.context.id;
        //console.log(obj_id);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div>
    <form role="form">
        <div class="form-group">
            <label>Please select first value:</label>
            <select id="firstSelection" class="form-control">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <div class="form-group">
            <label>Please select second value:</label>
            <select id="secondSelection" class="form-control" disabled="true">
                <!-- fetched from server -->
            </select>
        </div>
        <div class="form-group">
            <label>Please select third value:</label>
            <select id="thirdSelection" class="form-control" disabled="true">
                <!-- fetched from server -->
            </select>
        </div>
    </form>
</div>