How to make javascript select an option in a select (dropdown) list.

In an HTML form, I have a select (dropdown) list named TimeZone. It contains, as you might imagine, options such as "Pacific Time," "Mountain Time," etc.

Under certain conditions, the correct time zone will be contained in a variable. How can I make javascript use the variable to make the correct selection from the dropdown list?  

Thanks!

Kathryn
KathrynGZAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

bobbit31Commented:
for (i=0;i<yourSelectBox.options.length;i++) {
   if (yourSelectBox.options[i].value == TimeZoneVariable) {
      yourSelectBox.options[i].selectedIndex = i;
      break;
   }
}
0
KathrynGZAuthor Commented:
Thanks, bobbit31, but I couldn't get it to work.

Here's the code for my dropdown box:

<select name="TimeZone">
          <option selected>--Select one--</option>
          <option>Pacific Time</option>
          <option>Arizona Time</option>
          <option>Mountain Time</option>
          <option>Central Time</option>
          <option>Eastern Time</option>
          <option>Alaska Time</option>
          <option>Hawaii Time</option>
          </select>


And here's the relevant js code:

nextNode = nextNode.nextSibling  //I'm pulling the existing time zone from an XML file
TimeZoneOption = nextNode.text  //var holding time zone from XML tree
alert(TimeZoneOption)                 //I did this as a test to make sure the variable contained the
                                                    correct time zone, and it did.

//below is your code, adapted for my page

for (i=0;i<document.FrontPage_Form2.TimeZone.options.length;i++) {
    if (document.FrontPage_Form2.TimeZone.options[i].value == TimeZoneOption) {
        document.FrontPage_Form2.TimeZone.options[i].selectedIndex = i;
        break;
     }
}

But after the script is run, the dropdown box stays on the first option, "--Select One--"

Any ideas?

Thanks--

Kathryn
0
bobbit31Commented:
you have to assign a value to each of the options ;)

<select name="TimeZone">
          <option selected>--Select one--</option>
          <option value="Pacific Time">Pacific Time</option>
          <option value="Arizona Time">Arizona Time</option>
          etc...
</select>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

James RodgersWeb Applications DeveloperCommented:
this will do it based on the text

for (i=0;i<yourSelectBox.options.length;i++) {
   if (yourSelectBox.options[i].text == TimeZoneVariable) {
      yourSelectBox.options[i].selectedIndex = i;
      break;
   }
}


but you really should have some value for each selection, other wise you will have nothing to pass in a form

eg

<select name="TimeZone">
          <option selected>--Select one--</option>
          ...
          <option value="GMT-5">Eastern Time</option> or <option value="ET">Eastern Time</option>
           ...
          </select>
0
KathrynGZAuthor Commented:
LOL! Yes, that makes perfect sense, and I made the correction ... but it didn't solve the problem! I'm stumped, because your code looks to me like it should work. Do you think the spaces in the values are causing problems? Is it a screen refresh problem?

My js book says options can be set by setting Option.selected to true. I also tried that--i.e.,

document.FrontPage_Form2.TimeZone.TimeZoneOption.selected = true

but it tells me it's null or not an object.

I'm teaching myself js, and obviously I've got a lot to learn, but maybe the above will give you an idea...

I increased the points. I thought it was going to be easier than it's turning out to be.

Thanks again--

Kathryn

0
James RodgersWeb Applications DeveloperCommented:
document.FrontPage_Form2.TimeZone.TimeZoneOption.options[x].selected = true

where x is the index of the item to select
0
James RodgersWeb Applications DeveloperCommented:
what is the varaible that could possible hold the timezone, how is it formatted
is it a number

text

a code?
0
KathrynGZAuthor Commented:
Aha--I just tried

for (i=0;i<document.FrontPage_Form2.TimeZone.options.length;i++) {
  if (document.FrontPage_Form2.TimeZone.options[i].value == TimeZoneOption) {
  document.FrontPage_Form2.TimeZone.options[i].selected = true;
  break;
  }
}

And it works.

Thanks to both of you--I used elements from both your suggestions.

Does an 80/20 split sound okay? bobbit31, I used your script except for one line. Jester_48, I used one line from you, with a slight modification to get it to work.

It may have also made a difference to take the spaces out of the option values.

Thanks again!

Kathryn
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
James RodgersWeb Applications DeveloperCommented:
glad you got it working

however you want to handle it
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.