Select option from selection and show info of the selection in the table cells

Question

I would like to have a page for applying online for a university and giving the user the option of choosing three main majors their interested in. For each selection they make (major selected) I would like to show information about department and contact number for that major.

I would like to know how to write it using jQuery.

<table id="table11" style="width:100%">
<tr>
<th>#</th>
<th> Major<i</th>
<th>Department</th>
<th>Contact Number</th>
</tr>
<tr id="tr1">
<td>1</td>
<td><select id="selection" name="Major" onchange=UserInput1(this)  >
				<option selected="true" style="display:none;">Please Choose Major</option>
				<option value="Cs">Cs:computer science</option>
				<option value="Arch">Architecture</option>
				<option value="Eng">Eng:Engineering</option>
				<option value="Bu">Business</option>	
				<option value="other">Other</option>
				
			</select></br></td>
<td></td>
<td></td>
</tr>
<tr id="tr2">
<td>2</td>
<td><select id="selection" name="Major" onchange=UserInput2(this)>
				<option selected="true" style="display:none;">Please Choose Major</option>
				<option value="Cs">Cs:computer science</option>
				<option value="Arch">Architecture</option>
				<option value="Eng">Eng:Engineering</option>
				<option value="Bu">Business</option>	
				<option value="other">Other</option>
				
			</select></br></td>
<td></td>
<td></td>
</tr>
<tr id="tr3">
<td>3</td>
<td><select id="selection" name="Major" onchange=UserInput3(this)>
				<option selected="true" style="display:none;">Please Choose Major</option>
				<option value="Cs">Cs:computer science</option>
				<option value="Arch">Architecture</option>
				<option value="Eng">Eng:Engineering</option>
				<option value="Bu">Business</option>	
				<option value="other">Other</option>
				
			</select></br></td>
<td ></td>
<td></td>
</tr>
</table>

function UserInput1(sel)
{
	var t = document.getElementById("table11"); 
		switch (sel.value){

	case "Cs":
       t.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].innerHTML="Science";
		t.getElementsByTagName("tr")[1].getElementsByTagName("td")[3].innerHTML="01/000000";
		
        break;
		
    case "Arch":
        t.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].innerHTML="Design";
		t.getElementsByTagName("tr")[1].getElementsByTagName("td")[3].innerHTML="01/000001";
		
        break; 
		
		
	case "Eng":
	
	t.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].innerHTML="Engineering";
	t.getElementsByTagName("tr")[1].getElementsByTagName("td")[3].innerHTML="01/000002";
	
		break;
	
		
		case "Bu" :
		
	t.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].innerHTML="Business";
	t.getElementsByTagName("tr")[1].getElementsByTagName("td")[3].innerHTML="01/000003";		
		break;
		
	case "other":
	
	t.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].innerHTML="N/a";
	t.getElementsByTagName("tr")[1].getElementsByTagName("td")[3].innerHTML="Contact us";
	break;
    
}

}
function UserInput2(sel)
{
		var t = document.getElementById("table11"); 
		switch (sel.value){

	case "Cs":
       t.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].innerHTML="Science";
		t.getElementsByTagName("tr")[2].getElementsByTagName("td")[3].innerHTML="01/000000";
		
        break;
		
    case "Arch":
        t.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].innerHTML="Design";
		t.getElementsByTagName("tr")[2].getElementsByTagName("td")[3].innerHTML="01/000001";
		
        break; 
		
		
	case "Eng":
	
	t.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].innerHTML="Engineering";
	t.getElementsByTagName("tr")[2].getElementsByTagName("td")[3].innerHTML="01/000002";
	
		break;
	
		
		case "Bu" :
		
	t.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].innerHTML="Business";
	t.getElementsByTagName("tr")[2].getElementsByTagName("td")[3].innerHTML="01/000003";		
		break;
		
	case "other":
	
	t.getElementsByTagName("tr")[2].getElementsByTagName("td")[2].innerHTML="N/a";
	t.getElementsByTagName("tr")[2].getElementsByTagName("td")[3].innerHTML="Contact us";
	break;
    
}

}

function UserInput3(sel)
{	
	var t = document.getElementById("table11"); 
		switch (sel.value){

	case "Cs":
       t.getElementsByTagName("tr")[3].getElementsByTagName("td")[2].innerHTML="Science";
		t.getElementsByTagName("tr")[3].getElementsByTagName("td")[3].innerHTML="01/000000";
		
        break;
		
    case "Arch":
        t.getElementsByTagName("tr")[3].getElementsByTagName("td")[2].innerHTML="Design";
		t.getElementsByTagName("tr")[3].getElementsByTagName("td")[3].innerHTML="01/000001";
		
        break; 
		
		
	case "Eng":
	
	t.getElementsByTagName("tr")[3].getElementsByTagName("td")[2].innerHTML="Engineering";
	t.getElementsByTagName("tr")[3].getElementsByTagName("td")[3].innerHTML="01/000002";
	
		break;
	
		
		case "Bu" :
		
	t.getElementsByTagName("tr")[3].getElementsByTagName("td")[2].innerHTML="Business";
	t.getElementsByTagName("tr")[3].getElementsByTagName("td")[3].innerHTML="01/000003";		
		break;
		
	case "other":
	
	t.getElementsByTagName("tr")[3].getElementsByTagName("td")[2].innerHTML="N/a";
	t.getElementsByTagName("tr")[3].getElementsByTagName("td")[3].innerHTML="Contact us";
	break;
    
}

}

Answer 1

Below is version which uses jquery. Instead of writing data in function for each select I am storing it in simple json object. When selection changes appropriate row data is retrieved by value of option and placed in other columns.

$(function() {

  var dataToFill = {
    'Cs': {
      'department': 'Science',
      'contact': '01/00000'
    },
    'Arch': {
      'department': 'Design',
      'contact': '01/00001'
    },
    'Eng': {
      'department': 'Engineering',
      'contact': '01/00002'
    },
    'Bu': {
      'department': 'Business',
      'contact': '01/00003'
    },
    'other': {
      'department': 'N/a',
      'contact': 'Contact us'
    }
  };


  $('select').on('change', function() {
    var selectedval = $(this).val();
    var row = dataToFill[selectedval];
    $(this).closest('td').next().html(row['department']).next().html(row['contact']);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table11" style="width:100%">
  <tr>
    <th>#</th>
    <th>Major
      <i</th>
        <th>Department</th>
        <th>Contact Number</th>
  </tr>
  <tr id="tr1">
    <td>1</td>
    <td>
      <select id="selection" name="Major">
        <option selected="true" style="display:none;">Please Choose Major</option>
        <option value="Cs">Cs:computer science</option>
        <option value="Arch">Architecture</option>
        <option value="Eng">Eng:Engineering</option>
        <option value="Bu">Business</option>
        <option value="other">Other</option>

      </select>
      </br>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr id="tr2">
    <td>2</td>
    <td>
      <select id="selection" name="Major">
        <option selected="true" style="display:none;">Please Choose Major</option>
        <option value="Cs">Cs:computer science</option>
        <option value="Arch">Architecture</option>
        <option value="Eng">Eng:Engineering</option>
        <option value="Bu">Business</option>
        <option value="other">Other</option>

      </select>
      </br>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr id="tr3">
    <td>3</td>
    <td>
      <select id="selection" name="Major">
        <option selected="true" style="display:none;">Please Choose Major</option>
        <option value="Cs">Cs:computer science</option>
        <option value="Arch">Architecture</option>
        <option value="Eng">Eng:Engineering</option>
        <option value="Bu">Business</option>
        <option value="other">Other</option>

      </select>
      </br>
    </td>
    <td></td>
    <td></td>
  </tr>
</table>