Select 选项并在 table 单元格中显示选择的信息

Question

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

我想知道如何使用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

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

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

Select 选项并在 table 单元格中显示选择的信息

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

javascript

jquery

html-table

selection

fill