CodePen

HTML

            
              <?php
$firstCat= array('Cars', 'Bikes', 'Food', 'Movies', 'Computers');
$Cars= array('BMW','Zen','Maruti','Scorpio');
$Bikes= array('ZMR','Karizma','Pulsur','Boxer','Splendor');
$Food=array('Pizza','Burgar','Biryani','Tuna');
$Movies= array('Social Network','Zombie','Hang Over','Wrong Turn','Resident Evil');
$Computers= array('laptop','desktop');
?>


    <select id="cat">
        <?php
        for($i=0; $i<=count($firstCat)-1; $i++){
            echo "<option>".$firstCat[$i]."</option>";
            }
        ?>
    </select>
    
    <select id="subcat">
    </select>

            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              	if($('#cat').val()=='Cars'){
			$('#subcat').html('<?php
for($i=0; $i<=count($Cars)-1; $i++){
	echo "<option>".$Cars[$i]."</option>";
	}
?>');					
		};

 $('#cat').change(function(){
	 	if($('#cat').val()=='Cars'){
			$('#subcat').html('<?php
for($i=0; $i<=count($Cars)-1; $i++){
	echo "<option>".$Cars[$i]."</option>";
	}
?>');					
		}else if($('#cat').val()=='Bikes'){
		$('#subcat').html('<?php
for($i=0; $i<=count($Bikes)-1; $i++){
	echo "<option>".$Bikes[$i]."</option>";
	}
?>');	
		}else if($('#cat').val()=='Food'){
			$('#subcat').html('<?php
for($i=0; $i<=count($Food)-1; $i++){
	echo "<option>".$Food[$i]."</option>";
	}
?>');					
		}else if($('#cat').val()=='Movies'){
			$('#subcat').html('<?php
for($i=0; $i<=count($Movies)-1; $i++){
	echo "<option>".$Movies[$i]."</option>";
	}
?>');					
		}else if($('#cat').val()=='Computers'){
			$('#subcat').html('<?php
for($i=0; $i<=count($Computers)-1; $i++){
	echo "<option>".$Computers[$i]."</option>";
	}
?>');					
		}
	});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................