jQuery on change multiple selected elements

Question

I have multiple select elements like this

<select id="changefilter" name="id"><option value="">1</option></select>
<select id="changefilter" name="price"><option value="">1</option></select>
<select id="changefilter" name="sort"><option value="">1</option></select>

I then have a jquery on change function that listens for changes made to changefilter and then submits form applyfilter like this:

jQuery('#changefilter').change(function () {
    jQuery('#applyfilter').submit();
});

Problem is that it only seems to apply apply the onchange form submit to the first field, I would like this to apply to any select fields that have changed.

Rather than giving each select field a unique name and have different .change events, is there a way to have the one code listen to all the select elements?

Use classes instead of ids. Ids should be unique on the page. — Stryner
– Stryner, Commented Nov 6, 2015 at 13:13
Multiple element don't allow same id. It's not HTML standard. Try to give unique id and assign a common class to all. And then listen the event via class not id. — Deepak Biswal
– Deepak Biswal, Commented Nov 6, 2015 at 13:14

inMILD · Accepted Answer · 2018-09-20 08:40:03Z

1

ID should be unique. Base on your case, you must change the ID.

<select id="id" name="id"><option value="">1</option></select>
<select id="price" name="price"><option value="">1</option></select>
<select id="sort" name="sort"><option value="">1</option></select>

Then ids should be seperated by coma.

.change( should be like:

jQuery('#id,#price,#sort').change(function () {
    jQuery('#applyfilter').submit();
});

answered Sep 20, 2018 at 8:40

inMILD

1982 silver badges12 bronze badges

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

Comments

Oleksandr T. · Accepted Answer · 2015-11-06 13:14:21Z

0

id (#) must be unique use clasess (.) instead

<select class="changefilter" name="id"><option value="">1</option></select>
<select class="changefilter" name="price"><option value="">1</option></select>
<select class="changefilter" name="sort"><option value="">1</option></select>

jQuery('.changefilter').change(function () {
    jQuery('#applyfilter').submit();
});

answered Nov 6, 2015 at 13:14

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Comments

Tree Nguyen · Accepted Answer · 2015-11-06 13:14:26Z

0

Id has to be unique for each of the element. Class, on the other hand, can be multiple

answered Nov 6, 2015 at 13:14

Tree Nguyen

1,1992 gold badges16 silver badges40 bronze badges

Comments

Jack M · Accepted Answer · 2015-11-06 13:14:32Z

0

Add a class to the multi select and do $('.classname').change

answered Nov 6, 2015 at 13:14

Jack M

2,5844 gold badges30 silver badges52 bronze badges

Comments

Darshan Dave · Accepted Answer · 2015-11-06 13:16:02Z

0

Change id to class

<select class="changefilter" name="id"><option value="">1</option></select>
<select class="changefilter" name="price"><option value="">1</option>   </select>
<select class="changefilter" name="sort"><option value="">1</option></select>

jQuery('.changefilter').change(function () {
jQuery('#applyfilter').submit();
});

answered Nov 6, 2015 at 13:16

Darshan Dave

6352 gold badges10 silver badges33 bronze badges

Comments

Bergerova · Accepted Answer · 2015-11-06 13:17:38Z

0

Please change the id attribute to class attribute, since id has to be unique, you can't have several DOM elements with the same id. If you will change your selector from jQuery('#changefilter') to jQuery('.changefilter')it will work as expected

answered Nov 6, 2015 at 13:17

Bergerova

9033 gold badges10 silver badges21 bronze badges

Comments

Vlada · Accepted Answer · 2015-11-06 13:23:11Z

0

Use classes instead of ids and here a exemple how to get name and value of what is selected.

<select class="changefilter" name="id"><option value="1">1</option><option value="2">2</option></select>
<select class="changefilter" name="price"><option value="1">1</option><option value="2">2</option></select>
<select class="changefilter" name="sort"><option value="1">1</option><option value="2">2</option></select>

<script>
    $('.changefilter').change(function () {
        alert('' + this.name + ' is change to ' + this.value)
    });
</script>

answered Nov 6, 2015 at 13:23

Vlada

1,66919 silver badges26 bronze badges

Collectives™ on Stack Overflow

jQuery on change multiple selected elements

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related