Need a little help with javascript and webpage dropdowns..

September 29, 2006 4:26 AM

Need a little help with javascript..

Say I have a page with multiple dropdown boxes, all of which contain exactly the same options. At the minute, I have to click on all of those dropdowns individually, which is very repetitive.

I was thinking that it might be possible to use javascript to add a button to that webpage that would select the same option on all the dropdowns on that page. But sadly I don't know how to do that, and google is no help.. so any help would be appreciated.

(by the way, it doesn't have to be javascript - I'm happy to do anything that would help do this.)

posted by ascullion to Computers & Internet (8 answers total)

Best answer: I have a page with multiple dropdown boxes, all of which contain exactly the same options.

Well that doesn't make sense at all. But a simple solution would be that when you change the value in one dropdown, it automatically changes the value of others.

add this to your select tags:

onchange="toggleAll(this.value)"

And add this in the head in script tags:

function toggleAll(newVal) {
  var selects = document.getElementsByTagName("select");
  for (var i = 0; i < selects.length; i++) {br>
    for (var x = 0; i < selects[i] .options.length; x++) {br>
      if (selects[i].options[x].value == newVal) selects[i].options[x].selected = true;    
  }
}

NOTE: Take out the br> that shows up at the end of some lines, that's Metafilter adding those for reasons unknown to me.
posted by furtive at 5:11 AM on September 29, 2006

Oh, missing a closing } in there. Sorry.
posted by furtive at 5:14 AM on September 29, 2006

Response by poster: thanks furtive, will try that out.

BTW.. as to it not making sense. It's a movable type 'approve comments' page. possibly i should have said that above.. so you have x number of comments, and each has a drop-down - approve, reject, junk, etc etc
posted by ascullion at 5:15 AM on September 29, 2006

Response by poster: oh, actually... i need the page to have slightly more flexibility..

ideally.. i could choose to control them all at once, or choose to do them individually. from reading the above, wouldn't that solution only allow me to control them all at once?
posted by ascullion at 5:17 AM on September 29, 2006

Correct. The solution is to create a new dropdown, and only have that dropdown call onchange. That would change everything to the value of your new dropdown, but you could then make any modifications you wanted.
posted by spaceman_spiff at 5:19 AM on September 29, 2006

Response by poster: aha, thanks for that. will try it out.
posted by ascullion at 5:22 AM on September 29, 2006

Response by poster: thanks for all the help so far, is much appreciated.

have tried that out.. but can't quite get it to work. just be to clear.. i really only have very little idea what i'm doing..

two questions..

1 - am i right in thinking that if this works, i would be able to actualyl see the dropdowns across the page changing?

2 - i suspect that what i'm getting wrong is i'm building my 'control all' dropdown wrongly. here's the code i'm using.. anything obviously not right?


<select onchange="toggleAll(this.value)">

<option value="nothing" selected>Select...</option>


<option value="approve" >Approve</option>


<option value="defer" >Defer</option>


<option value="delete" >Delete</option>


<option value="reject" >Reject</option>


<option value="junk" >Junk</option>


<option value="moderate" >Pending</option>

</select>


posted by ascullion at 5:38 AM on September 29, 2006

Best answer: FWIW, this is my "Go To" page for getting any JS answers. It is a decent JS FAQ.
JavaScript Form Contents
posted by juggler at 7:27 AM on September 29, 2006 [1 favorite]