从选择中选择选项并在表格单元格中显示选择的信息

Question

我希望有一个在线申请大学的页面，并让用户可以选择他们感兴趣的三个主要专业。对于他们所做的每个选择（主要选择）我想显示有关部门和联系的信息那个专业的数字。

我想知道如何使用jQuery编写它。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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;
    
}

}

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是使用jquery的版本。 我没有在每个选择函数中写入数据，而是将其存储在简单的json对象中。当选择更改时，相应的行数据将按选项的值检索并放在其他列中。

$(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>