Search code examples
selectprototypejs

Select the first element of a list with prototype

I have a form with 3 lists like this and I need every time one of the lists change put the others in cero 0, I need this in prototype or pure Javascript 

<select id="1" onchange="resetall()">
  <option value="0">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="2" onchange="resetall()">
  <option value="0">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="3" onchange="resetall()">
  <option value="0">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

thanks.

Solution

  • Here's a working demo using Prototype

    Basically, it finds all select elements with the class resetOthers, and listens for the onchange event (don't use the onchange HTML attribute - it's cleaner to add the JavaScript behavior via JavaScript once the page has loaded).

    When a select changes, it loops through the select elements, and sets each to the value of the first option (except for the one that triggered the event, of course).