Js Code To Get Count Values From List Then Connect With Hide/show Select Option
Greeting...! I have taken input data as list format, I try to set specified index value counts to show in select option. As per console count values will be shown but in HTML page
Solution 1:
I changed the logic of the code. I will insert the first name and the number '1' in a new array named 'c', then will try to check if the names exist already in this new array, if it already exists I will increase the counter, else, I will add this name to the array 'c'. Then I will add the names in the array 'c' to the html as a dropdown list where you can select the name and the number will be automatically displayed Good luck!
<!doctype html><html><head></head><body><div><selectid="mySelectElement"onchange="myFunction()"></select><h6> Total Number of Branches attend by the spacified RIT:
<spanid="branch_counts">0</span></h6></div><script>
markers1 = [
['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar'],
['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Ranjith'],
['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar'],
['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Abinash'],
['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar']
];
let c = [];
c.push([markers1[0][6], 1]); //inserting only the first elementfor (let i = 1; i < markers1.length; i++) {
//for each item in markers1 (except the first item) we will check and add it to 'c' array, if it already exists we wil increase the counterfor (let j = 0; j < c.length; j++) {
if (c[j].includes(markers1[i][6])) {
//item in markers1 exist already in 'c', lets increase counter
c[j][1] = c[j][1] + 1;
break;
} else {
//item in markers1 does not exist in 'c', lets add new item with counter=1
c.push([markers1[i][6], 1]);
break;
}
}
}
//lets append a list of names in our htmllet select = document.getElementById('mySelectElement');
for (var i = 0; i < c.length; i++) {
var opt = document.createElement('option');
opt.value = c[i][0];
opt.innerHTML = c[i][0];
select.appendChild(opt);
}
myFunction(); //we call it so that it shows the number of the currently selected name (selected when we added the names to the select tag)functionmyFunction() {
var x = document.getElementById("mySelectElement").value;
for (let i = 0; i < c.length; i++) {
if (c[i][0] == x) {
//console.log(c[i][1]);document.getElementById("branch_counts").innerHTML = c[i][1];
break;
}
}
}
</script></body></html>Solution 2:
I still don't understand what you really want to do, but I have some remarks about your code that may help you:
- In your markers1 array you should include all the xxxxxxxxx inside a apostrophes to be 'xxxxxxxxx', because without them JS will think it is a variable that is not declared and will throw an error,
- The span tag you wrote will trigger the function 'count()' only when the text inside the span is changed this is how onChange works. But it seems you are not changing the text of the span anywhere! That is why the function 'count()' will never be executed. So you should call that function manually in JS code just after building your array 'b',
- Inside the function count(), there are two block of code the 'if' and the 'else' but apparently you are not doing any action there, I understand that you want to write something in your span, so you should do that inside those two blocks of code. Good Luck! If you could explain more your issue we may the solution.
Post a Comment for "Js Code To Get Count Values From List Then Connect With Hide/show Select Option"