If em javascript

Front-end
#1

Ola pessoal, to criando um formulario em HTML e javaScript, e gostaria que ao selecionar a opção do combo, mudasse a mascara do textfield, as mascaras eu ja tenho e funcionam como segue o exemplo o que eu não sei é como criar um if para trocar a mascara de acordo com a opção selecionada, que no java seria o selectedindex ou selectred item, alguem pode me ajudar?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="DropDown.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

	function formatar_mascara(src, mascara) {
	var campo = src.value.length;
	var saida = mascara.substring(0,1);
	var texto = mascara.substring(campo);
	if(texto.substring(0,1) != saida) {
		src.value += texto.substring(0,1);
	
	}
}

</script>
<script type="text/javascript">
			function FormataCnpj(campo, teclapres)
			{
				var tecla = teclapres.keyCode;
				var vr = new String(campo.value);
				vr = vr.replace(".", "");
				vr = vr.replace("/", "");
				vr = vr.replace("-", "");
				tam = vr.length + 1;
				if (tecla != 14)
				{
					if (tam == 3)
						campo.value = vr.substr(0, 2) + '.';
					if (tam == 6)
						campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 5) + '.';
					if (tam == 10)
						campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(6, 3) + '/';
					if (tam == 15)
						campo.value = vr.substr(0, 2) + '.' + vr.substr(2, 3) + '.' + vr.substr(6, 3) + '/' + vr.substr(9, 4) + '-' + vr.substr(13, 2);
				}
			}
		</script>

</head>

<body>
<form action="#" id="form" name="form" method="post">
  <table width="400" border="0" align="left"> 
    <tr> 
    <td >Pessoa</td>
    
      <td ><select name="pessoa" class="textBox" id="tipopessoa"  style="width:140px"  >
        <option value=1>Física</option>
        <option value=2>Jurídica</option>
      </select></td> 
      <td  align="left">CPF/CNPJ</td>
        <td width="0">  <input type="text" name="data" maxlength="18" onkeypress="FormataCnpj(this,event)" /> 
      <!--
      <input name="CPF" type="text" maxlength="14" size="20" onkeypress="formatar_mascara(this, '###.###.###-##')" />

       -->
</td> 
    </tr> 
    <tr> 
        </table> 
</form> 

</body>
</html>
#2

Eu li que seria algo como document.form.combo.selectedIndex, mas não sei como informá-lo de qual ele deveria chamar la no HTML…

#3

Bem posso dar um exemplo de como fazer vc obter o index do item selecionado e o seu conteúdo.
Faça um onchange mandando o combo como parâmetro ex:

<select name="pessoa" class="textBox" id="tipopessoa"  style="width:140px"  onchange="funcao(this)">
function funcao(combo){
        var index = combo.selectedIndex;
        var conteudo = combo.options[index].innerText;
}

Acho que funciona também vc obter o combo por:

        var combo = document.getElementById("ID_DO_COMBO");

Bem de qualquer forma acho que isto irá ajudar. Não se esqueça de testar em diferentes browsers, é muito fácil disto funcionar no Firefox e não no IE.

#4