Comments on: Need a little help with javascript and webpage dropdowns..

Question: Need a little help with javascript and webpage dropdowns..

ascullion — Fri, 29 Sep 2006 04:26:48 -0800

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.)

By: furtive

furtive — Fri, 29 Sep 2006 05:11:56 -0800

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.

By: furtive

furtive — Fri, 29 Sep 2006 05:14:48 -0800

Oh, missing a closing } in there. Sorry.

By: ascullion

ascullion — Fri, 29 Sep 2006 05:15:22 -0800

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

By: ascullion

ascullion — Fri, 29 Sep 2006 05:17:38 -0800

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?

By: spaceman_spiff

spaceman_spiff — Fri, 29 Sep 2006 05:19:38 -0800

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.

By: ascullion

ascullion — Fri, 29 Sep 2006 05:22:18 -0800

aha, thanks for that. will try it out.

By: ascullion

ascullion — Fri, 29 Sep 2006 05:38:11 -0800

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>

By: juggler

juggler — Fri, 29 Sep 2006 07:27:22 -0800

FWIW, this is my "Go To" page for getting any JS answers. It is a decent JS FAQ.
JavaScript Form Contents