How to fill second dropdown on the base of first dropdown va

Question

I have tow following dropdowns and I want to fill second dropdown on the base of first dropdown value.

 

<select id="iFunction" name="nFunction"> <option value="-1" selected="">Select…</option> <option value="1">Drilling</option> <option value="2">Gas</option> <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>

 

When I click Drilling option in iFunction dropdown then I want to fill Drill1 and Drill2 in another dropdown on the base of 1 common in both the dropdown list.

 

i have tried many approaches provided by Google

Can someone suggest me approach?

Thanks.