Olá, 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
           
           <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>   
 
    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);
    }