Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5594
  • Last Modified:

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
0
KathrynGZ
Asked:
KathrynGZ
  • 4
  • 3
  • 2
1 Solution
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
James RodgersWeb Applications DeveloperCommented:
glad you got it working

however you want to handle it
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now