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

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']."'"]; ?>
<div class="pull-right col-md-2 col-sm-2 text-right"><h5>{{LANG sub_category}}</h5></div>


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

<script type="text/javascript">
$(document).on('change', '#category_id', function(event) {
	id = $(this).val();
$(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

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.