Estou fazendo um cardápio no qual possui uma lista de seleção interativa manipulada pelo JavaScript. O problema é que quando eu vou alterar a opção de pão de acordo com o sanduíche escolhido nada acontece. Segue o código abaixo
HTML
<select class="ped" id="ped" onchange="pao()">
<optgroup label="Tradicionais" id="pedido">
<option value="301">301 - Super Frango</option>
<option value="302">302 - Hamburguer</option>
<option value="303">303 - Precheseburguer</option>
<option value="304">304 - Eggs Burguer</option>
<option value="305">305 - Americano</option>
<option value="306">306 - Bauru</option>
<option value="307">307 - Misto</option>
<option value="308">308 - Queijo quente</option>
<option value="309">309 - Cachorro quente</option>
</optgroup>
<optgroup label="Linha especial">
<option value="310">310 - Sem noção</option>
<option value="311">311 - Bedegueba</option>
<option value="312">312 - Fortaleza</option>
<option value="313">313 - Ceará</option>
<option value="327">327 - TDB (Tudo de Bom)</option>
</optgroup>
</select>
JavaScript
function pao(){
var sand = document.getElementById('ped');
var opcpao = document.createElement('select');
var p1 = document.createElement('option');
var p2 = document.createElement('option');
var p3 = document.createElement('option');
if (sand.value == 301) {
//p1.value = 301;
p1.text = "Árabe";
//p2.value = 301;
p2.text = "Bolão";
sand.appendChild(p1);
opcpao.appendChild(sand);
} else {
}
document.body.appendChild(opcpao);
}