code:

<script>
    $(document).ready(function(){
      $(".field").change(function(){
        field = $(".field").val();
        $.ajax({
          type:"POST",
          data:{"field":field},
          url:"potential-courses.php",
          success:function(data){
            $(".course").val(data);              
          }
        });
      });
    });
  </script>

potential-courses.php

<?php
    include("conn.php");
    $field = $_POST['field'];
    $sql = "select * from course_master where field = '$field' order by course_full_name";
    $result = mysqli_query($link,$sql);
    while ($row = mysqli_fetch_array($result)) 
    {
        echo "<option value=".$row['course_short_name'].">".$row['course_full_name']."</option>";
    }
?>

html code:

<select  name='field' class='field' id="field">
    <option value="">Select Field</option> 
    <option value='engineering'>Engineering</option>  
    <option value='law'>LAW</option>  
    <option value='medical'>Medical</option>  
    <option value='management'>Management</option>  
    <option value='pharmacy'>Pharmacy</option>
    <option value='hotel management'>Hotel Management</option>
    <option value='mass communication'>Mass Communication</option>
    <option value='agriculture'>Agriculture</option>
    <option value='architecture'>Architecture</option>
    <option value='education'>Education</option>
    <option value='paramedical'>Paramedical</option>
    <option value='design'>Design</option>
    <option value='commerce'>Commerce</option>
    <option value='film/tV/media'>Film /TV/ Media</option>
  </select>

  <select name="course" class="course">
    <option value="">Select Courses</option>
  </select>

In this code I have two dropdown list i.e

<select  name='field' class='field' id="field">

and another is

<select name="course" class="course">

when I change value from "name=field" it display nothing in "name=course". where I am doing wrong please help me.

Thank You