This is the output when I print a collection
variable in console log.
(14) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {px_id: 2713, attr_name: "A", other_id: 4}
1: {px_id: 2712, attr_name: "B", other_id: 4}
2: {px_id: 2698, attr_name: "C", other_id: 4}
3: {px_id: 2694, attr_name: "D", other_id: 4}
4: {px_id: 2695, attr_name: "E", other_id: 4}
5: {px_id: 2693, attr_name: "F", other_id: 4}
6: {px_id: 2697, attr_name: "G", other_id: 4}
7: {px_id: 2714, attr_name: "H", other_id: 4}
8: {px_id: 2711, attr_name: "I", other_id: 4}
9: {px_id: 2699, attr_name: "J", other_id: 4}
10: {px_id: 2696, attr_name: "K", other_id: 4}
11: {px_id: 2710, attr_name: "L", other_id: 4}
12: {px_id: 2709, attr_name: "M", other_id: 4}
13: {px_id: 2708, attr_name: "N", other_id: 4}
length: 14__proto__: Array(0)
And in the HTML, this is how the select option is getting populated :
$_.each(collection, function(index_, term_) {
html += "<option value='" + term_.px_id + "'>" + term_.attr_name + "</option>";
});
The HTML is as follows:
<table class="enc-data-table" align="center">
<tr>
<th><b>Attributes</b></th>
<td> <select id="attrList" class="attrList"></select></td>
</tr>
</table>
When I use the following on change event in my javascript
$(".attrList").on("change", function() {
var testVal = $(".attrList option:selected").val();
console.log(testVal);
alert(testVal);
});
When I select different attr_name
from the dropdown menu, the console.log(testVal);
and alert(testVal);
always display the number px_id as 2713
. When I select B
, I was expecting px_id to be 2712
, for C
, I was expecting it to be 2698
etc. What am I doing wrong above?
I tried a simple hardcoded JS Bin example here and it works as expected:
https://jsbin.com/pipumarufo/edit?html,js,console,output