selecionar item sem carregar a página

Boa noite a todos . Direto ao ponto. Pessoal no select name="cursos" ao selecionar o **item php**  gostaria que exibisse sem carregar a página o (select name="php_nivel") ou ao selecionar o **item css **gostaria que exibisse sem carregar a página o (select name="css_nivel") 

	 

Cursos:<br />
<form id="form1" name="form1" method="post" action="">
<select name="cursos" id="mySelect" required onchange="myFunction()">
 <option value="" selected></option>
 <option value="php">curso de php</option>
 <option value="css">curso de css</option>
</select>
</form>

<br />

<p id="biel"></p>

<script>
function myFunction() {
 var x = document.getElementById("mySelect").value;
	document.getElementById("biel").innerHTML = "" + x;
}
</script>

<br />

<?php
if (isset($_POST["cursos"])){ ?>

<?php
if ($_POST['cursos'] == 'php' ){
?>

curso de php:

<select name="php_nivel" required >
 <option value="" selected></option>
 <option value="php_nivel_1">php nivel 1</option>
 <option value="php_nivel_2">php nivel 2</option>
 <option value="php_nivel_3">php nivel 3</option>
</select>
<?php
}
elseif ($_POST['cursos'] == 'css' ){
?>

<select name="css_nivel" required >
 <option value="" selected></option>
 <option value="css_nivel_1">css nivel 1</option>
 <option value="css_nivel_2">css nivel 2</option>
 <option value="css_nivel_3">css nivel 3</option>
</select>
<?php
}
}
?>

<br />

<input type="text" name="" value="" />