On change event not working as expected

JavaScript
1

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

2

When you expect the HTML in the console, is it what you expect?

3

Actually, using the information I have in the collection variable that I showed above, I am populating the select tag’s drop down list using this line html += "<option value='" + term_.px_id + "'>" + term_.attr_name + "</option>";

4

I got that, but you can view the result in the Web developer tools in your browser. They usually open when you press F12 or right click somewhere in the page and select “inspect element”. There you can check that the HTML actually is what you expect it do. And if its not you know where the error is.

5

I see. The HTML is fine. It’s just the on change thing not working as expected.

6

Do you maybe have multiple elements with class attrList on that page? It might be reporting the value from another attrList than you expect.

7

I just checked the HTML part again, I don’t know why the value is getting populated as 4,1,19 etc. It should have been 4 digits number. However, it did print 2713 as the only value when I kept on changing the selected option as explained above.

My class names are unique for each element.

8

It’s showing correct option values but still same problem.

9

One thing I noticed when I changed the .val() to .text() in the following line :

var testVal = $(".attrList option:selected").val(); to

var testVal = $(".attrList option:selected").text();

I noticed that attr_name A is always getting printed in the console log in addition to other elements. For example, if I select attr_name B, in the console log I am seeing AB, if I select C, I see AC, how do I clear the first entry A so that it doesn’t get attached with other texts. Perhaps this might be messing with the value part.

10

I really don’t have a clue what’s going wrong. I just created a pen with your code, and it works just fine: https://codepen.io/anon/pen/zavONW

11

Thanks for looking into it and for your time. Finally, I was able to resolve by using var testVal = $(this).val(); and it worked. Not sure what was wrong with the one I was using before.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.