try
<!DOCTYPE html>
<html>
<head>
<script>
function changeddl(obj) {
var text = obj.options[obj.selectedIndex].text;
var ddl2 = document.querySelectorAll('#iOperation option');
for (var i = 1; i < ddl2.length; i++) {
var option = ddl2[i];
option.style.display = 'none';
if (text == 'Drilling') {
if (['Drill1', 'Drill2'].indexOf(option.text) > -1)
option.style.display = 'block'
}
if (text == 'Gas') {
if (['Compression', 'Dehydration'].indexOf(option.text) > -1)
option.style.display = 'block'
}
}
}
</script>
</head>
<body>
<select id="iFunction" name="nFunction" onchange="changeddl(this)">
<option value="-1" selected="">Select…</option>
<option value="1">Drilling</option>
<option value="2">Gas</option>
</select>
<select id="iOperation" name="nOperation">
<option value="-1" selected="">Select…</option>
<option value="1_21">Drill1</option>
<option value="1_22">Drill2</option>
<option value="2_21">Compression</option>
<option value="2_22">Dehydration</option>
</select>
</body>
</html>
Demo:
Plunker[
^]