How to show 2nd drop-down field after first drop-down selection is chosen?

Im trying to modify a web script where a drop-down works successfully. How can another drop-down field appear only after a selection has been made from the first drop-down list? Heres the current code:

<?php if ($pt->page == 'category' && $pt->show_sub == true) { ?>
<div class="pull-right col-md-3 no-padding-left">
<select name="type" class="form-control form-group" id="sub_categories_">
<?php echo $pt->sub_categories_array["'".$_GET['id']."'"]; ?>
</select>
<div class="pull-right col-md-2 col-sm-2 text-right"><h5>{{LANG sub_category}}</h5></div>

and this:

$(document).on('change', '#category_id', function(event) {   
event.preventDefault();   
id = $(this).val();   
$('#sub_category_id').html(sub_categories_array["'"+id+"'"]);
});
$(document).on('change','#sub_categories_', function(event) {   
window.location.href = site_url+'/videos/category/<?php echo($_GET['id']) ?>/'+$('#sub_categories_').val();
});

any guidance is appreciated