Mostrar u ocultar un elemento usando javascript en todos los navegadores
Aquí está el código html ...
<select id="dept" name="dept" style="float: left;">
<option value="eee" onclick="toggleDisplay('dept_input_div', 0)">EEE</option>
<option value="ece" onclick="toggleDisplay('dept_input_div', 0)">ECE</option>
<option value="eie" onclick="toggleDisplay('dept_input_div', 0)">EIE</option>
<option value="cse" onclick="toggleDisplay('dept_input_div', 0)">CSE</option>
<option value="it" onclick="toggleDisplay('dept_input_div', 0)">IT</option>
<option value="mechanical" onclick="toggleDisplay('dept_input_div', 0)">Mechanical</option>
<option value="civil" onclick="toggleDisplay('dept_input_div', 0)">Civil</option>
<option value="mechatronics" onclick="toggleDisplay('dept_input_div', 0)">Mechatronics</option>
<option value="biotech" onclick="toggleDisplay('dept_input_div', 0)">Bio-tech</option>
<option value="automobile" onclick="toggleDisplay('dept_input_div', 0)">Automobile</option>
<option value="chemical" onclick="toggleDisplay('dept_input_div', 0)">Chemical</option>
<option value="aeronautical" onclick="toggleDisplay('dept_input_div', 0)">Aeronautical</option>
<option value="architecture" onclick="toggleDisplay('dept_input_div', 0)">Architecture</option>
<option value="others" onclick="javascript:toggleDisplay('dept_input_div', 1);">Others..</option>
</select>
<div id="dept_input_div" style="display: none">
<input class="inputbox" name="dept-input" type="text" id="dept-inputbox" />
</div>
Aquí está el código javascript ..
function toggleDisplay(id, displayvalue)
{
if ( displayvalue == 1 ) {
document.getElementById(id).style.display = 'block';
} else if ( displayvalue == 0 ) {
document.getElementById(id).style.display = 'none';
}
}
El código anterior funciona bien en Firefox y es decir (vista de compatibilidad desactivada) pero en Chrome y es decir (compatibilidad activada)
¿Qué estoy haciendo mal? ¿Hay una forma adecuada de hacer esto que funcione en todos los navegadores?