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

[ChrisjChrisj]

I’m 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? Here’s 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>


---etc.---


<?php if ($pt->page == 'category' && $pt->show_sub == true) { ?>


<script type="text/javascript">
$(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();
});
</script>

any guidance is appreciated

[m_hutley]

@ChrisjChrisj

How can another drop-down field appear only after a selection has been made from the first drop-down list?

#category_id:not([value=""]) ~ #sub_categories_ {
  display: inline;
}