jQuery更改多个选定元素

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?

Answer 1

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

Answer 2

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

Answer 3

将一个类添加到多重选择并执行$（'。classname'）。change

Answer 4

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

Answer 5

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

Answer 6

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>

Answer 7

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