How To Create Cascading Dropdown List

How To Create Cascading Dropdown List?

I have 2 different dropdown lists in an application form. The first dropdown is Research Area 1, the second one is Research Area 2. And both dropdowns contain the same value. I want to change the value of the second dropdown list on the selection of the value of the first dropdown list, and also the value which is selected in the first dropdown list wants to hide from the second dropdown list like Cascading Dropdown List.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>

The HTML Code

Research Area 1 Dropdown List

<select name="researchArea1" id="researchArea1">
<option value="" selected>-- Select Research Area 1 --</option>
<option value="Artificial intelligence and robotics">Artificial intelligence and robotics</option>
<option value="Big data analytics">Big data analytics</option>
<option value="Architectures, Compiler Optimization, and Embedded Systems">Architectures, Compiler Optimization, and Embedded Systems</option>
<option value="Data Mining, Databases, and Geographical Information Systems">Data Mining, Databases, and Geographical Information Systems</option>
</select>

Research Area 2 Dropdown List

<select name="researchArea2" id="researchArea2" class="researchArea2 ">
<option value="" selected>-- Select Research Area 2 --</option>
<option rel="Artificial intelligence and robotics" value="Artificial intelligence and robotics">Artificial intelligence and robotics</option>
<option rel="Big data analytics" value="Big data analytics">Big data analytics</option>
<option rel="Architectures, Compiler Optimization, and Embedded Systems" value="Architectures, Compiler Optimization, and Embedded Systems">Architectures, Compiler Optimization, and Embedded Systems</option>
<option rel="Data Mining, Databases, and Geographical Information Systems" value="Data Mining, Databases, and Geographical Information Systems">Data Mining, Databases, and Geographical Information Systems</option>
</select>

The JavaScript Code

I am using the below javascript code which is not working.

<script type="text/javascript">//<![CDATA[
$(function(){
var $researchArea1= $("#researchArea1"),
$researchArea2 = $(".researchArea2");
$researchArea1.on("change",function(){
var _rel = $(this).val();
$researchArea2 .find("option").attr("style","");
$researchArea2 .val("");
if(!_rel) return $researchArea2 .prop("disabled",true);
$researchArea2 .find("[rel="+_rel+"]").show();
$researchArea2 .prop("disabled",false);
});
});
//]]></script>

The CSS Style

<style id="compiled-css" type="text/css">
.researchArea2 option{
display:none;
}
</style>