CODEWITHSUNDEEP
javascript
eric f.
eric f.

Reputation: 906

how to find all the select elements that have changed?

let's say I have a form that contains several "select" element that the User can choose. when ready to submit, I need to find all the "select" that have changed. how can I do it?

for example:

<form>
    <input type="text" name="a"/>
    <select name="b">...</select>
    <select name="c">...</select>
    <select name="d">...</select>
</form>

Upvotes: 2

Views: 336

Answers (6)

RobG
RobG

Reputation: 147373

You need to clarify what you mean by "the select have changed".

If you mean have changed from their default value, then you should have one option on each select (usually the first) set as the default selected option. Then you can iterate over the selects and see if the option with the selected attribute (or where the defaultSelected property is true) is the selected option, e.g.

<script>
function anyChanged(){
    var select, selects = document.getElementsByTagName('select');

    for (var i=0, iLen=selects.length; i<iLen; i++) {
      select = selects[i];

      if (!select.options[select.selectedIndex].defaultSelected) {
        // the selected option isn't the default
        alert('select ' + (select.id || select.name) + ' changed');
      }
    }
 }
</script>

<select name="one">
  <option selected>one
  <option>two
  <option>three
</select>

<button onclick="anyChanged()">Check</button>

However, if you want to see if the user has changed the selected option based on some other logic, you need to say what it is.

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

I would take advantage of the defaultSelected property on HTMLOptionElement instead of trying to keep track of selects that have changed:

form.onsubmit = function() {
    var selects = form.getElementsByTagName("select")
        , i
        , changedSelects = []
        , selected
        , select;

    /* Iterate over all selects in the form: */
    for (i = 0; i < selects.length; i++) {
        select = selects[i];
        /* Get the currently selected <option> element: */
        selected = select[select.selectedIndex];

        /* Determine if the currently selected option is the one selected by default: */
        if (!selected.defaultSelected) {
            changedSelects.push(select);
        }
    }

    alert(changedSelects.length);
}

You can iterate over all of the select elements on your form, determine if the selected option is the one that was selected by default, and push each one whose selected option wasn't the default into an array.

Example: http://jsfiddle.net/andrewwhitaker/abFr3/

Upvotes: 1

Christian
Christian

Reputation: 19740

Using jQuery, something like this should work:

$('select').change(function() {
    $(this).addClass('changed');
});

$('form').submit(function() {
    var changed_selects = $('select.changed');
    // do what you want with the changed selects
});

Upvotes: 1

Hristo
Hristo

Reputation: 46477

You can attach the onchange event listener to each <select> element. When the event is triggered, you can store the actual elements in an a temporary array and reference it later when you are ready to submit. Note that the array can hold the actual DOM elements.

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Do something like:

var selectedVal =  $("select[name='a'] option:selected").val();
//check this with your default selected val

Upvotes: 0

ziesemer
ziesemer

Reputation: 28687

You could register an event listener (using onchange, etc.) to determine if any changes were made.

Alternatively, you could keep a private copy of all of the previous values, then run a comparison before submit to check for changes.

Upvotes: 0

Related Questions