CODEWITHSUNDEEP
javascriptjquery
Ahmed
Ahmed

Reputation: 1533

jQuery on change multiple selected elements

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?

Upvotes: 1

Views: 4253

Answers (7)

inMILD
inMILD

Reputation: 198

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();
});

Upvotes: 1

Vlada
Vlada

Reputation: 1659

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>

Upvotes: 0

Bergerova
Bergerova

Reputation: 903

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

Upvotes: 0

Darshan Dave
Darshan Dave

Reputation: 645

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();
});

Upvotes: 0

Jack M
Jack M

Reputation: 2574

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

Upvotes: 0

Tree Nguyen
Tree Nguyen

Reputation: 1199

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

Upvotes: 0

Oleksandr T.
Oleksandr T.

Reputation: 77482

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();
});

Upvotes: 0

Related Questions