How to change value of one drop down box based on other drop-down box change using JQuery

Here we are going to discus how to change value of one drop down box based on other drop-down box change using JQuery

Part 1

Html Code

 <div class="select-box">
<select id="courseId" name="courseId" class="select" onchange="course_changeFunct(this.value)">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option> 
</select>
</div>
<div class="select-box">
<select id="location" name="location" class="select">
<option value="location1">location1</option>
<option value="location2">location2</option>
<option value="location3">location3</option>
<option value="location4">location4</option> 
</select>
</div>

Part 2

JQuery Script

function course_changeFunct(course_id)
{

var menu_type =$("#domains").val();
$.post("site_action_view.php?action=get_location_by_course_id", { course_id: course_id }).done(function( data ) {
	
$("#location").empty();
if(data=='')
{
var select_data='Sorry no Location';
}
else
{
var select_data='Select program'+data+'';	
}
  
$("#location").append(select_data);



});
}

Part 3

site_action_view.php Action Page

	case 'get_location_by_course_id':
        $result = $obj->get_location_by_course_id($_REQUEST['course_id']);
		//print_r($result);
		$var_option="";
		foreach($result as $key=>$data_value)
		{
		$var_option.=''.$data_value.'';	
		}
		echo $var_option;
        break;