jQuery change function loop for multiple select fields

Question

I have a form with 8 select fields numbered 1 to 8. I have the code below working to show/hide the recurring div numbered 1 to 8 but can't figure out how to put it in a loop to prevent duplicate script. Should I use the for loop or each command for this? any help is appreciated. Below is an example of what currently works for the first 2 select boxes.

jQuery(function() {
    id = 1;
    jQuery('#leveltype' + id).change(function() {
        if (jQuery(this).val() == "recurring") {
            jQuery('#recurring' + id).show();
        } else {
            jQuery('#recurring' + id).hide();
        }
    });
});

jQuery(function() {
    x = 2;
    jQuery('#leveltype' + x).change(function() {
        if (jQuery(this).val() == "recurring") {
            jQuery('#recurring' + x).show();
        } else {
            jQuery('#recurring' + x).hide();
        }
    });
});

Rajaprabhu Aravindasamy · Accepted Answer · 2016-03-06 10:32:58Z

1

Try to use attribute starts with selector,

jQuery('[id^=leveltype]').change(function(){
  jQuery('#recurring' + (this.id).replace("leveltype",""))
      .toggle(this.value=="recurring");
});

And the better approach would be using a class selector at this context. Also using data-attribute will be handy for us at this stage.

answered Mar 6, 2016 at 10:32

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:28:05Z

1

First, Try to setup your functions to work on change event, using .on:

Documentation

There you should check 'change' event.

Then second, as for me, you should consider connecting your functions not on the ids, but on class names, or any other not unique attributes. For example, you have 8 selects with ids id1, id2, id3 ..., but they have class "mySelect", then you can connect jQuery to them using class selector:

jQuery('.mySelect')...

That should work. Try it.

Example from SO.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Mar 6, 2016 at 10:31

Bandydan

6061 gold badge8 silver badges24 bronze badges

2 Comments

Tomalak Over a year ago

Don't link to w3schools, they are a truly bad resource. There are better resources, the jQuery documentation for examples.

Rajaprabhu Aravindasamy Over a year ago

Yes, just visit w3fools.com

JulioCT · Accepted Answer · 2016-03-06 10:34:35Z

0

I would use each with a callback, in my opinion is a better choice to avoid closure issues:

var myCallback = function(index, value) {
        value.change(function(){
            if (jQuery(this).val() == "recurring") {
                jQuery('#recurring' + index).show();
            } else {
                jQuery('#recurring' + index).hide();
            }
        });


};

var myArray = $('#leveltype');
jQuery.each(myArray, myCallback (index, value) );

answered Mar 6, 2016 at 10:34

JulioCT

1,1278 silver badges8 bronze badges

1 Comment

Tomalak Over a year ago

This is completely unnecessary and goes against the usage pattern of jQuery. Almost all jQuery functions affect all selected elements, there is no need to call .each just to attach an event handler.

Bastian Seeleib · Accepted Answer · 2016-03-07 18:01:16Z

0

I asume you have tried the following?:

for(x=1; x<9; x++){
    jQuery('#leveltype' + x).change(function(){
        if (jQuery(this).val() == "recurring") {
            jQuery('#recurring' + x).show();
        } else {
            jQuery('#recurring' + x).hide();
        }
    });
}

This won't work because the change function is fired after the for has been looped, so the x will be 8 all the time. To solve this you need to get x inside the change function. For this you can use the index function or save the x inside the DOM.

DOM example:

for(x=1; x<9; x++){
    jQuery('#leveltype' + x).data("num", x);

    jQuery('#leveltype' + x).change(function(){
        if (jQuery(this).val() == "recurring") {
             jQuery('#recurring' + jQuery(this).data("num")).show();
        } else {
            jQuery('#recurring' + jQuery(this).data("num")).hide();
        }
   });
}

edited Mar 7, 2016 at 18:01

answered Mar 6, 2016 at 10:34

Bastian Seeleib

3074 silver badges14 bronze badges

1 Comment

David Light Over a year ago

thanks! II had tried the first version you listed and failed as you said. got your modification to work.

halfer · Accepted Answer · 2017-12-09 14:15:54Z

0

use class 'leveltype' instead, with attribute data-id="x":

jQuery(function() {
    jQuery('.leveltype').change(function(){
        var t = jQuery(this), x = t.attr('data-id');
        if (t.val() == "recurring") {
            jQuery('#recurring' + x).show();
        } else {
            jQuery('#recurring' + x).hide();
        }
    });
});

edited Dec 9, 2017 at 14:15

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 6, 2016 at 10:52

ThangTD

1,70419 silver badges17 bronze badges

2 Comments

David Light Over a year ago

They are all in a leveltype class. Is this better than the for loop which is listed above and I've gotten to work?

ThangTD Over a year ago

Actually the for loop way is also works, but I rarely see people put the event listener in the for loop. In fact using class, that you are letting jQuery to loop for you instead of writing your own.

Collectives™ on Stack Overflow

jQuery change function loop for multiple select fields

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related