I'm trying to make a specific div appear or not based on what I select in the listbox. but I don't understand where I'm wrong.
<html>
<head>
<style type='text/css'>
.multiselectUsers {
width: 200px;
display: none;
}
.multiselectAnagrafica {
width: 200px;
display: none;
}
.multiselectForm {
width: 200px;
display: none;
}
</style>
</head>
<body>
<form action='post'>
<select id='tabella' style='display:inline-block' onchange='Cusers();'>
<option value='users'>users</option>
<option value='anagrafica'>anagrafica</option>
<option value='form'>form</option>
</select>
<p style='display:inline-block'>output: </p>
<div class='multiselectUsers'>
<!--something-->
</div>
<div class='multiselectAnagrafica'>
<!--something-->
</div>
<div class='multiselectForm'>
<!--something-->
</div>
</form>
</body>
<script type='text/javascript'>
function Cusers(){
var users = 'users';
var anagrafica = 'anagrafica';
var form = 'form';
var e = document.getElementById('tabella');
var val = e.options[e.selectedIndex].value;
if (val == users) {
document.getElementById('multiselectUsers').style.display = 'inline-block';
document.getElementById('multiselectAnagrafica').style.display = 'none';
document.getElementById('multiselectForm').style.display = 'none';
} else if (val == anagrafica) {
document.getElementById('multiselectUsers').style.display = 'none';
document.getElementById('multiselectAnagrafica').style.display = 'inline-block';
document.getElementById('multiselectForm').style.display = 'none';
} else if (val == form){
document.getElementById('multiselectUsers').style.display = 'none';
document.getElementById('multiselectAnagrafica').style.display = 'none';
document.getElementById('multiselectForm').style.display = 'inline-block';
}
}
</script>
</html>
adding alert (val); inside each if, I see that changing the selection, the alert appears with the correct value, so I assume that the problem is related to how I tell him to change the style.display, but I do not understand what is wrong