Multiple Category Dropdown Parent > Child + As per user permission

I am trying to make a page which will have Parent Category dropdown list at the top so once you select any category it will loads another dropdown list if there is a child category. and as per selection the content (category page) will load without refreshing the page.

I found two codes from wordpress codex as below

<li id="categories">
    <h2><?php _e('Posts by Category'); ?></h2>
    <form action="<?php bloginfo('url'); ?>/" method="get">
    <div>
<?php
$select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0&hierarchical=1&hide_empty=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
    <noscript><div><input type="submit" value="View" /></div></noscript>
    </div></form>
</li>

AND

<li id="categories"><h2><?php _e('Posts by Category'); ?></h2>
    <?php wp_dropdown_categories('show_option_none=Select category'); ?>

<script type="text/javascript"><!--
    var dropdown = document.getElementById("cat");
    function onCatChange() {
        if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
            location.href = "<?php echo get_option('home');
?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
--></script>
</li>

Both code works fine and loads page with the selected category. However What exactly I want is initially there will be only one dropdown with the parent category list and when user will select the category than another dropdown with sub category will appear and than once in the sub category if any selected than another will appear.. and so on depend on depth of the category.

I also want to only list those category which the logged in user have permission to access and rest will be hidden.

Thanks a lot.