Lista suspensa - exibir div ao clicar em uma opção
Você deve escrever uma função que 'mostre' a parte correspondente do formulário, dependendo do que o usuário selecionou. Por exemplo, se 'Pizza' for selecionado, a div # section2 com a pergunta sobre o tipo Pizza deverá ser mostrada.
Isso faz parte do código html
<form id="survey" action="#" method="post">
<div id="section1">
<label for="food">What is your favourite type of food?</label>
<select id="food" onchange="selection()">
<option value="pizza">Pizza</option>
<option value="mex">Mexican</option>
<option value="thai">Thai</option>
</select>
</div>
<div id="section2">
What is your favourite type of pizza?<br>
<label for="hawaiian">Hawaiian</label><input type="radio" id="hawaiian">
<label for="supreme">Supreme</label><input type="radio" id="supreme">
<label for="vegetarian">Vegetarian</label><input type="radio" id="vegetarian">
</div>
Como eu iria escrever uma função javascript para que quando eu clicar na pizza opção, ele irá exibir a seção 2? Eu sou um novato de javascript completo, então qualquer ajuda seria ótima.