'Select option from selection and show info of the selection in the table cells
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;
}
}Solution 1:[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>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | lukbl |