I borrowed some code from another post, so I realize that the col1 designation isn't necessary for my example, but basically this just needs to populate with a certain employees information when you choose a certain topic (payroll, tax, etc.):
HTML:
<table class="table table-bordered table-striped">
<tr>
<th>
<select class="col1 selectTopic">
<option>Payroll</option>
<option>Tax</option>
<option>Accounts Payable</option>
</select>
</th>
</tr>
<tr>
<td class="col1 name"></td>
</tr>
<tr>
<td class="col1 photo"></td>
</tr>
<tr>
<td class="col1 email"></td>
</tr>
<tr>
<td class="col1 phone"></td>
</tr>
</table>
Javascript:
var data = {
"contacts":
{
"contact": [
{
"name": "Payroll",
"photo": "Emp 1 Photo",
"email": "emp1@mysite.com",
"phone": "4113834848"},
{
"name": "Tax",
"photo": "Emp 2 Photo",
"email": "emp2@mysite.com",
"phone": "4113834848"},
{
"name": "Accounts Payable",
"photo": "Emp 3 Photo",
"email": "emp3@mysite.com",
"phone": "4113834848"},
]}
}
$(".selectTopic").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col1")) {
whichCol = "col1";
}
$.each(data.topics.topic, function(i, v) {
if (v.name == jthis.val()) {
$("td." + whichCol + ".name").html(v.name);
$("td." + whichCol + ".photo").html(v.photo);
$("td." + whichCol + ".email").html(v.email);
$("td." + whichCol + ".phone").html(v.phone);
return;
}
});
});
You have data.topics.topic
, I believe you want data.contacts.contact
https://jsfiddle.net/qfy397jt/
Do you know how to use Developer Tools/a console in the browser? It would've shown you the cause of this error (that data.topics
is undefined). https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en for if you haven't used Dev. tools before!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.