Wählen Sie die Option aus der Auswahl und zeigen Sie die Informationen der Auswahl in den Zellen

Question

Ich möchte eine Seite für die Online-Bewerbung für eine Universität haben und dem Benutzer die Möglichkeit geben, drei Hauptfächer auszuwählen, an denen sie interessiert sind (Wichtig gewählt) Ich möchte Informationen über die Abteilung und die Kontaktnummer für diesen Major anzeigen.

Ich würde gerne wissen, wie man es mit jQuery schreibt.

<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) > 
 
\t \t \t \t <option selected="true" style="display:none;">Please Choose Major</option> 
 
\t \t \t \t <option value="Cs">Cs:computer science</option> 
 
\t \t \t \t <option value="Arch">Architecture</option> 
 
\t \t \t \t <option value="Eng">Eng:Engineering</option> 
 
\t \t \t \t <option value="Bu">Business</option> \t 
 
\t \t \t \t <option value="other">Other</option> 
 
\t \t \t \t 
 
\t \t \t </select></br></td> 
 
<td></td> 
 
<td></td> 
 
</tr> 
 
<tr id="tr2"> 
 
<td>2</td> 
 
<td><select id="selection" name="Major" onchange=UserInput2(this)> 
 
\t \t \t \t <option selected="true" style="display:none;">Please Choose Major</option> 
 
\t \t \t \t <option value="Cs">Cs:computer science</option> 
 
\t \t \t \t <option value="Arch">Architecture</option> 
 
\t \t \t \t <option value="Eng">Eng:Engineering</option> 
 
\t \t \t \t <option value="Bu">Business</option> \t 
 
\t \t \t \t <option value="other">Other</option> 
 
\t \t \t \t 
 
\t \t \t </select></br></td> 
 
<td></td> 
 
<td></td> 
 
</tr> 
 
<tr id="tr3"> 
 
<td>3</td> 
 
<td><select id="selection" name="Major" onchange=UserInput3(this)> 
 
\t \t \t \t <option selected="true" style="display:none;">Please Choose Major</option> 
 
\t \t \t \t <option value="Cs">Cs:computer science</option> 
 
\t \t \t \t <option value="Arch">Architecture</option> 
 
\t \t \t \t <option value="Eng">Eng:Engineering</option> 
 
\t \t \t \t <option value="Bu">Business</option> \t 
 
\t \t \t \t <option value="other">Other</option> 
 
\t \t \t \t 
 
\t \t \t </select></br></td> 
 
<td ></td> 
 
<td></td> 
 
</tr> 
 
</table>

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

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

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

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

 
} 
 

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

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

 
}

Answer 1

Im Folgenden finden Sie die Version jquery verwendet. Anstatt Daten für jede Auswahl in Funktion zu schreiben, speichere ich sie in einem einfachen JSON-Objekt. Wenn sich die Auswahl ändert, werden die entsprechenden Zeilendaten nach dem Wert der Option abgerufen und in anderen Spalten platziert.

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