How do I cascade information from one column to another with datatable?

I am using datatable for my project and filtering the columns on top. The filtering works well but the columns do not cascade. Is there a way to cascade the information from one column to another (depending upon the selection). For example, if I select Ashton Cox under Name, only Technical Author should be highlighted under Postion column and San Francisco under Office column. All other values in the dropdown should be grayed out.

Here is what I have tried so far.

Here is the link to my code - https://live.datatables.net/rajifejo/2/edit

$(document).ready(function() {
  var table = $('#example').DataTable({
    responsive: true,
    searching: true
  });
  $('#dropdown1').on('change', function() {
    table.columns(0).search(this.value).draw();
  });
  $('#dropdown2').on('change', function() {
    table.columns(1).search(this.value).draw();
  });
  $('#dropdown3').on('change', function() {
    table.columns(2).search(this.value).draw();
  });
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="searchbox">
  <p>
    Name:
    <select id="dropdown1">
      <option value="">Select</option>
      <option>Ashton Cox</option>
      <option>Brielle Williamson</option>
      <option>Cedric Kelly</option>
    </select>
  </p>
  <p>
    Postion:
    <select id="dropdown2">
      <option value="">Select</option>
      <option>Technical Author</option>
      <option>Integration Specialist</option>
      <option>Javascript Developer</option>
    </select>
  </p>
  <p>
    Office:
    <select id="dropdown3">
      <option value="">Select</option>
      <option>San Francisco</option>
      <option>New York</option>
      <option>Edinburgh</option>
    </select>
  </p>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
  <thead>
    <tr>
      <th>&#160;</th>
      <th>&#160;</th>
      <th>&#160;</th>
      <th colspan="3" style=" text-align: center;">Information</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$3,120</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Director</td>
      <td>Edinburgh</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$5,300</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$4,800</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$3,600</td>
    </tr>
    <tr>
      <td>Jenna Elliott</td>
      <td>Financial Controller</td>
      <td>Edinburgh</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$5,300</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$4,525</td>
    </tr>
  </tbody>
</table>

Solution

First i created an array of objects, each has a person's info. After each select, i loop through the array finding the correct object and saving their data in variables. I then loop through the other dropdowns comparing their text with the data i have, if they match i give the <option> a disabled attribute.

$(document).ready(function() {
const person = [{name:'Ashton Cox',position:'Technical Author',office:'San Francisco'},{name:'Brielle Williamson',position:'Integration Specialist',office:'New York'},{name:'Cedric Kelly',position:'Javascript Developer',office:'Edinburgh'}];
var table = $('#example').DataTable({
responsive: true,
searching: true
});
$('#dropdown1').on('change', function () {
table.columns(0).search( this.value ).draw();
let myname = this.value;
let myoffice, myposition;
$.each(person,function(key, val) {
    if(val.name == myname) {
    myoffice = val.office;
    myposition = val.position;
  }
});
$('#dropdown2 option').each(function() {
    if($(this).text() !== myposition) {
    $(this).attr('disabled','');
  }
});
$('#dropdown3 option').each(function() {
    if($(this).text() !== myoffice) {
    $(this).attr('disabled','');
  }
});
});
$('#dropdown2').on('change', function () {
table.columns(1).search( this.value ).draw();
let myposition = this.value;
let myoffice, myname;
$.each(person,function(key, val) {
    if(val.position == myposition) {
    myname = val.name;
    myoffice = val.office;
  }
});
$('#dropdown1 option').each(function() {
    if($(this).text() !== myname) {
    $(this).attr('disabled','');
  }
});
$('#dropdown3 option').each(function() {
    if($(this).text() !== myoffice) {
    $(this).attr('disabled','');
  }
});
} );
$('#dropdown3').on('change', function () {
table.columns(2).search( this.value ).draw();
let myoffice = this.value;
let myposition, myname;
$.each(person,function(key, val) {
    if(val.office == myoffice) {
    myname = val.name;
    myposition = val.position;
  }
});
$('#dropdown1 option').each(function() {
    if($(this).text() !== myname) {
    $(this).attr('disabled','');
  }
});
$('#dropdown2 option').each(function() {
    if($(this).text() !== myposition) {
    $(this).attr('disabled','');
  }
});
} );

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

   
<div class="searchbox">
<p>Name: <select id="dropdown1">
<option value="">Select</option>
<option>Ashton Cox</option>
<option>Brielle Williamson</option>
<option>Cedric Kelly</option>
</select>
</p>

<p>Postion: <select id="dropdown2">
<option value="">Select</option>
<option>Technical Author</option>
<option>Integration Specialist</option>
<option>Javascript Developer</option>
</select>
</p>

<p>Office: <select id="dropdown3">
<option value="">Select</option>
<option>San Francisco</option>
<option>New York</option>
  <option>Edinburgh</option>
</select>
</p>
</div>
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
          </tr></tbody></table>